background-color
Bu özellik kullanılarak bir elemanın arkaplan rengi ayarlanabilir. Varsayılan değer olan transparent arkaplanın şeffaf olmasını sağlar. Değer olarak girilecek renk değerleri ise arkaplan rengi olur. Bu özellik ile yapılan biçimlendirmeler alt elemanlara aktarılmaz.
background-clip
Bu özellik belirtilen arkaplanın nerede etkili olacağını belirler. border-box değeri arkaplanın kenarlıkların da dahil olduğu bir alanda uygulanacağını belirtir ve bu değer varsayılandır. padding-box değeri kullanılırsa arkaplan içerik ve içerik ile kenarlıklar arasındaki boşluğu kapsayacak bir alanda etkili olur. content-box değeri kullanılırsa arkaplan sadece içeriğin bulunduğu alana uygulanır. Bu özellik ile yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Arkaplan</title>
<meta charset="UTF-8">
<style>
p.ornek1{
width: 200px;
height: 200px;
border: 5px dotted #000000;
padding: 20px;
background-color: aqua;
background-clip: content-box;
}
p.ornek2{
width: 200px;
height: 200px;
border: 5px dotted #000000;
padding: 20px;
background-color: aqua;
background-clip: padding-box;
}
p.ornek3{
width: 200px;
height: 200px;
border: 5px dotted #000000;
padding: 20px;
background-color: aqua;
background-clip: border-box;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br/>
<p class="ornek2">Örnek Paragraf 2</p><br/>
<p class="ornek3">Örnek Paragraf 3</p><br/>
</body>
</html>
background-image
Bu özellik ile arkaplana resim yerleştirilebilir. Varsayılan değer olan none değeri arkaplanda resim olmayacağını belirtir. Arkaplana resim yerleştirmek için url("adres") şeklinde bir değerle resmin adresi belirtilmelidir. Varsayılan durumda resim elemanın sol üst köşesine yerleştirilir ve eleman boyunca hem yatay hem de dikey doğrultuda tekrarlanır. Arkaplan olarak resim kullanıldığında resmin kullanılamaması durumuna tedbir olarak bir de arkaplan rengi belirtilmesinde yarar vardır. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
background-size
Bu özellik kullanılarak arkaplan olarak belirtilen resmin boyutları ayarlanabilir. Varsayılan değer olan auto değerinde fotoğrafın kendi boyutları kullanılır. Değer olarak iki farklı uzunluk değeri aralarına boşluk bırakılarak girilebilir. Bu durumda ilk değer genişlik, ikinci değer yükseklik olacaktır. cover değeri kullanıldığında resim elemanın tamamını kaplayacak şekilde ölçeklendirilir. Fakat bu durumda resmin bazı kısımları görüntülenmeyebilir. contain değeri kullanıldığında ise resim elemanın içerisine sığabilecek en büyük boyuta getirilir. Bu özellik ile yapılan biçimlendirmeler alt elemanları etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Arkaplan</title>
<meta charset="UTF-8">
<style>
p.ornek1{
width: 400px;
height: 100px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: auto;
}
p.ornek2{
width: 400px;
height: 100px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 100px 100px;
}
p.ornek3{
width: 400px;
height: 100px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: cover;
}
p.ornek4{
width: 400px;
height: 100px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: contain;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br/>
<p class="ornek2">Örnek Paragraf 2</p><br/>
<p class="ornek3">Örnek Paragraf 3</p><br/>
<p class="ornek4">Örnek Paragraf 4</p><br/>
</body>
</html>
Yukarıdaki örnekte kullanılan resmin orijinal boyutu 322 x 268 pikseldir. Bu nedenle auto değeri ile kullanıldığı zaman içerisinde bulunduğu elemana sığmayacaktır. Arkaplanda resmin sadece bir kısmı görünecektir. "100px 100px" değeri kullanıldığında resim bu boyutta kullanılacaktır. Resmin bu halinden içerisinde bulunduğu elemana dört tane sığmaktadır. cover değeri kullanıldığında resim genişliği en az 400px ve yüksekliği en az 100px olana kadar büyütülecektir. Resmin genişliği 400px olduğunda yüksekliği 100px'den çok fazladır. Bu nedenle yatay olarak resmin sadece bir kısmı görülebilir. contain değeri kullanıldığında resim 400px X 100px alana sığacak şekilde ölçeklendirilir. Bu durumda resmin yüksekliği 100px olur, genişliği ise 120px civarındadır. Bu durumda elemana bu resimden 3 tanesi tam olarak sığar.
background-repeat
Bu özellik ile arkaplan resminin nasıl tekrarlanacağı belirtilir. Varsayılan değer olan repeat kullanıldığında resim hem yatay hem de dikey doğrultuda tekrarlanır. repeat-x değeri kullanıldığında resim sadece yatay doğrultuda tekrarlanır. repeat-y değeri de sadece dikey doğrultuda tekrarlama yapılmasını sağlar. no-repeat değeri kullanıldığında tekrarlama yapılmaz. Bu özellikle yapılan biçimlendirmeler alt elemanı etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Arkaplan</title>
<meta charset="UTF-8">
<style>
p.ornek1{
width: 400px;
height: 100px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-repeat:repeat;
}
p.ornek2{
width: 400px;
height: 100px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-repeat:repeat-x;
}
p.ornek3{
width: 400px;
height: 100px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-repeat:repeat-y;
}
p.ornek4{
width: 400px;
height: 100px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br/>
<p class="ornek2">Örnek Paragraf 2</p><br/>
<p class="ornek3">Örnek Paragraf 3</p><br/>
<p class="ornek4">Örnek Paragraf 4</p><br/>
</body>
</html>
background-position
Bu özellikle arkaplana yerleştirilen resmin konumu ayarlanır. Belirtilen konumda yerleştirilen resmin sol üst köşesi yer alacaktır. Tekrarlamalar bu resim baz alınarak yapılacaktır. Seçeneklerden birisi değer olarak iki uzunluk girmektir. Bu durumda ilk belirtilen uzunluk resmin yatay konumunu, ikinci belirtilen uzunluk resmin dikey konumunu belirtir. Girilebilecek diğer sekiz değer şunlardır: left top, left bottom, left center, right top, right bottom, right center, center top, center bottom, center center. Bu değerler sırasıyla resmi sol üste, sol alta, sol merkeze, sağ üste, sağ alta, sağ merkeze, merkez üste, merkez alta ve hem dikey hem yatay olarak merkeze yerleştirir. Eğer bu değerlerden birisi kullanılırken sadece ilk kelime yazılırsa ikincisinin center olduğu varsayılır.
<!DOCTYPE html>
<html>
<head>
<title>CSS Arkaplan</title>
<meta charset="UTF-8">
<style>
p.ornek1{
width: 400px;
height: 100px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-repeat:no-repeat;
background-position: left top;
}
p.ornek2{
width: 400px;
height: 100px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-repeat:no-repeat;
background-position: right bottom;
}
p.ornek3{
width: 400px;
height: 100px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-repeat:no-repeat;
background-position: center center;
}
p.ornek4{
width: 400px;
height: 100px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-repeat:no-repeat;
background-position: 200px 50px;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br/>
<p class="ornek2">Örnek Paragraf 2</p><br/>
<p class="ornek3">Örnek Paragraf 3</p><br/>
<p class="ornek4">Örnek Paragraf 4</p><br/>
</body>
</html>
Bu eleman ile yapılan biçimlendirmeler alt elemanlara aktarılmaz.
background-origin
Bu özellik ile arkaplan resminin konumu belirlenirken baz alınan kısım belirtilir. Varsayılan değer olan padding-box değeri baz alınan alanın kenarlıklar dışında kalan alan olduğunu belirtir. border-box değeri ile kenarlıkları da içine alan alanın baz alınacağı belirtilirken content-box değeri sadece içeriğin bulunduğu alanın baz olarak kullanılmasını sağlar.
<!DOCTYPE html>
<html>
<head>
<title>CSS Arkaplan</title>
<meta charset="UTF-8">
<style>
p.ornek1{
width: 400px;
height: 100px;
padding: 20px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-repeat:no-repeat;
background-position: left top;
background-origin:border-box;
}
p.ornek2{
width: 400px;
height: 100px;
padding: 20px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-repeat:no-repeat;
background-position: left top;
background-origin:padding-box;
}
p.ornek3{
width: 400px;
height: 100px;
padding: 20px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-repeat:no-repeat;
background-position: left top;
background-origin:content-box;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br/>
<p class="ornek2">Örnek Paragraf 2</p><br/>
<p class="ornek3">Örnek Paragraf 3</p><br/>
</body>
</html>
background-attachment
Bu özellik kullanılarak arkaplan resminin nereye sabitleneceği belirtilebilir. Varsayılan scroll değeri kullanıldığında arkaplan resmi elemana sabitlenir. Eleman kaydırma çubuklarına sahipse kaydırma yapıldığında dahi arkaplan elemanın kapladığı alan üzerindeki konumunu muhafaza eder. local değeri kullanıldığında kaydırma yapıldığında içerikle birlikte arkaplan resmi de kayar. fixed değeri kullanıldığında ise resim pencerenin belli bir yerine sabitlenir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Arkaplan</title>
<meta charset="UTF-8">
<style>
p.ornek1{
width: 400px;
height: 50px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-attachment:fixed;
overflow-x:scroll;
}
p.ornek2{
width: 400px;
height: 50px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-attachment:scroll;
overflow-x:scroll;
}
p.ornek3{
width: 400px;
height: 50px;
border: 5px dotted black;
background-image: url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
background-size: 50px 50px;
background-attachment:local;
overflow-x:scroll;
}
</style>
</head>
<body>
<p class="ornek1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br/>
<p class="ornek2">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br/>
<p class="ornek3">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br/>
</body>
</html>
Yukarıdaki örnekte scroll ve local değerlerinin çalışma şekli doğrudan elemanların yanındaki kayar çubuklarla kaydırma yapılarak görülebilir. Fakat aynı yöntemle scroll ve fixed değerlerinin farkını görmek çok mümkün değildir. Bu farkı gözlemlemek için pencereyi sayfa için de kaydırma çubukları oluşacak kadar küçültün. Kaydırma işlemi sayfadan yapıldığında fixed değeri kullanılan arkaplan resminin pencerede sabit bir yerde kaldığı, scroll değeri kullanılan arkaplan resminin ise eleman ile birlikte kaydığı görülecektir.
Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
background
Bu özellik tek seferde birden çok arkaplan özelliğini biçimlendirmeye yarar. Kullanım formatı aşağıdaki şekildedir:
background: "background-color değeri" "background-position değeri"/"background-size değeri" "background-repeat değeri" "background-origin değeri" "background-clip değeri" "background-attachment değeri" "background-image değeri";
Her özellik değeri belirtilmek zorunda değildir. Belirtilmeyen değerler varsayılan olarak dikkate alınır. Bu özellik ile yapılan biçimlendirmeler alt elemanları etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Arkaplan</title>
<meta charset="UTF-8">
<style>
p.ornek1{
width: 400px;
height: 100px;
padding: 20px;
border: 5px dotted black;
background: aqua content-box ;
}
p.ornek2{
width: 400px;
height: 100px;
padding: 20px;
border: 5px dotted black;
background:no-repeat center top/50px 50px content-box url("https://dl.dropboxusercontent.com/u/53524685/arkaplan.jpg");
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br/>
<p class="ornek2">Örnek Paragraf 2</p><br/>
</body>
</html>