- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
background-color Kullanımı
Elementlerin zeminine bir renk tanımlamak için kullanılır.[code type="CSS"]p { background-color: #000000; }[/code] Tüm elementlere uygulanabilir.
background-image Kullanımı
Elementlerin zeminine resim eklemek için kullanılır.
[code type="CSS"]body {
background-image: url(/images/resim.jpg)
}[/code]
Tüm elementlere uygulanabilir.
background-repeat Kullanımı
background-repeat özelliği background-image ile zemine eklenen resmin tekrarlanmasını belirler.
[code type="CSS"]body {
background: white url(resim.gif);
background-repeat: repeat-x;
}[/code]
Tüm elementlere uygulanabilir.
background-attachment Kullanımı
background-attachment özelliği zemine eklenen resmin sayfa ile scroll yani sayfa aşağı veya yukarı kaydırıldığında hareket etmesini veya sayfanın zeminin de sabit kalmasını sağlar.
[code type="CSS"]body {
background: white url(gorsel.gif);
background-attachment: fixed;
}[/code]
background-position Kullanımı
background-position özelliği background-image ile belirlenen resmin başlangıç noktasını belirler. Bu özellik sadece block-level ve replaced (Bu elementler kendine özgü boyutları olan elementler olarak tanımlanabilir. Örneğin: IMG, INPUT, TEXTAREA, SELECT, ve OBJECT) elementlere uygulanır.
Kullanım yöntemi; Yatay değerler için: left, center, right Dikey değerler için: top, center, bottom
Yüzde değerleri ve uzunluk değerleri de kullanılır. Yüzde değerleri elementin boyuta bağlı olarak görecelidir. Uzunluk değerleri de kullanılabilir. Ancak farklı ekran çözünürlüklerinde farklı görüntülere sebebiyet vermesi nedeni ile pek önerilmez.
Yüzde değerler ve uzunluk değerleri verildiğinde ilk değer yatay içindir sonra gelen dikey değerdir. Örneğin %10 %60 değeri bir zemin resmi için verilmiş ise %10 değeri yataydaki değeri %60 ise dikey olarak değerini gösterir. 5px 10px gibi değerler verilmişse resmin sol üstden 5px sağa ve 10px aşağıdan başlayacağını belirler.
Eğer yalnızca yatay değer verilmiş ise, dikey değer %50 olarak kabul edilecektir. Yüzde değerler ve uzunluk değerleri eksi değerler alabilir. Örneğin; -2px %10 gibi. Aşağıdaki örnekler genel kullanım için yararlıdır:
- top left = left top = 0% 0%
- top = top center = center top = 50% 0%
- right top = top right = 100% 0%
- left = left center = center left = 0% 50%
- center = center center = 50% 50%
- right = right center = center right = 100% 50%
- bottom left = left bottom = 0% 100%
- bottom = bottom center = center bottom = 50% 100%
- bottom right = right bottom = 100% 100%
background Kullanımı
Bu özellik Zemin (background) ile ilgili tüm özelliklerin bir arada kullanılmasını sağlar.
[code type="CSS"]body{
background: white url(gorsel.gif)
}
blockquote {
background: #FFF
}
p {
background: url(../resimler/desen.png) #FFF fixed
}
table{
background: #000 url(resim.jpg) no-repeat bottom right
}[/code]
Bu içerik Harun İstenci tarafından aşağıda belirtilmiş olan kategoriler altında oluşturulmuş ve yayınlanmıştır. İçeriğin kopyalanması 5846 sayılı Fikir ve Sanat Eserleri Kanunu'na göre suçtur. | İstenci Systems
1997 yılında İstanbul'da dünyaya geldi ve memleketi Kastamonu. Çocukluğundan bu yana bilgisayar sistemleri üzerinde çalışıyor ve internet üzerinde içerik üretiyor...
| Harun İstenci Resmi Web Sitesi | Hakkında Daha Fazla > |
Yorum Gönder
Yorum alanı herkese açıktır. Olağan dışı bir yorum algılandığında topluluk politikalarımız gereğince 24 saat içinde kaldırılacaktır.