Background-color:
Herhangi bir div nesnesinde düz bir arka plan rengi vermek istediğimizde
"Background-color" özelliğini kullanırız. Burada istersek renk seçim
aracını kullanarak istediğimiz bir rengi seçebilir, istersek de rengimizin
kodunun başına "#" işareti koyarak yazabiliriz. Böylece istediğimiz
renk tonunu bir çok yerde aynı şekilde kullanabiliriz.
Birbirine uyumlu renk seçimi yapmak için http://colorschemedesigner.com/ sitesini kullanabilirsiniz. Burada
birbirine yakın ve zıt renklerin yakın tonlarını bulabilirsiniz.
Background-image: Div nesnelerimize resim olarak arka
plan vermek için kullanılır. Burada istersek Gözat butonuna tıklayarak resmimizi
seçebilir, istersek de resmin yolunu yazarak belirtebiliriz.
Burada dikkat edilmesi gereken bir şey Google botları
siteleri tararken her bir image (resim) dosyasını bir sorgu olarak
algılayacaktır. Sitede çok fazla sorgu bulunursa Google'da üst sıralara çıkması
zorlaşacaktır. Bu nedenle logo ya da iconlar gibi nesneleri background image olarak eklemek sitenin
performansını arttıracaktır.
Bir div nesnesinde background-image vereceğimizde resmin
boyutunun olabildiğince küçük yapılması gerekmektedir. Böylece sitenin boyutu
azaltılarak performansın artmasını sağlanacaktır. Bunun için dikkat edeceğimiz
2 konu bulunmakta:
İlk olarak, renk geçişi (degrade)
olan bir resmi genişliği 500px yüksekliği 100px olan bir div nesnesine
atayacağımızda, hazırlayacağımız resmin 500*100 boyutunda olması gerekmez.
Bunun yerine 1 px genişliğinde 100 px yüksekliğinde bir resim hazırlayıp, bu
div'e arka plan olarak verirsek, resim yan yana dizilecek ve divin tamamını
kaplayacaktır. Böylece 20 kb'lık bir resim yerine 1 kb'lık bir resim ile aynı
işi yapmış olacağız.
Diğer dikkat edeceğimiz şey ise resmin türü olacaktır. Örneğin
normal bir resim dosyasını arka plan olarak kullanacağımızda "jpg" yerine "png" türünü seçersek boyutu
gereksiz yere büyütmüş oluruz. "png"
sadece icon ya da logo gibi arka planın şeffaf olması gereken durumlarda
kullanılır.
Background-repeat: Eklenen resmin tekrarlayıp tekrarlamayacağını
belirlemek için kullanılır. "no-repeat"
seçeneği eklenen resmin sadece 1 defa görünmesini sağlar. "repeat-x" resmin yatayda
tekrarlamasını, "repeat-y"
ise resmin dikeyde tekrarlamasını sağlar.
Background-position (x):
Eklenen resmin sola,
sağa ya da ortalı olarak hizalanmasını sağlar. Eğer bu kısma sayısal bir değer
girersek, sol taraftan o kadar boşluk bırakarak resmi yerleştirecektir.
Background-position (y):
Eklenen resmin yukarı,
aşağı ya da dikey ortalı olarak hizalanmasını sağlar. Eğer bu kısma sayısal bir
değer girersek, üst taraftan o kadar boşluk bırakarak resmi yerleştirecektir.
Background-attachment: Bir div nesnesini aşağı doğru
kaydırdığımızda içindeki yazıların hareket etmesine rağmen arka plan resminin
sabit kalması için kullanılır. "fixed"
seçeneği ile resim sabit kalırken, "scroll"
seçeneğinde arka plan resmi yazı ile beraber hareket edecektir.