CSS Zemin Özellikleri
CSS Zemin Özellikleri
CSS zemin özellikleri, bir elemanın zemin özel tanımlamak için kullanılır. Bu özellikler;
- Zemin rengi,
- Zemin görseli,
- Zemin tekrarı,
- Zemin ekleri,
- Zemin pozisyonu'dur.
Zemin rengi
Bir elemanın zemininin rengini belirler. Sayfanın zemin rengi, body kısmında tanımlanır.
background-color: #c0d5fe;
Ekran Çıktısı;
CSS ile zemin rengi aşağıdaki biçimlerden biriyle belirlenir:
- Bir HEX değeri: "#de0420"
- Bir RGB değeri: "rgb(100,50,220)"
- Bir renk adı: red, blue vb.
h1 {
background-color: #6005fd;
}
p {
background-color: #e23fde;
}
div {
background-color: #cdef00;
}Zemin resmi
Zemin resmi özelliği, elemanın zeminini oluşturacak görseli belirler. Normal olarak görsel zeminde tekrarlanır yani tüm zemini kaplar. Zemin resmi aşağıdaki gibi atanır:
body {
background-image: url("gy.png");
}
Zemin resminin yatay ve dikey tekrarı
Varsayılan olarak zemin resmi özelliği (background-image property) bir görseli sayfa içinde hem yatay hem de dikey olarak tekrarlar. Bazı resimlerin sadece yatay ya da dikey olarak tekrarlanması istenebilir. Eğer zemin resmi yatay olarak tekrarlanacaksa aşağıdaki gibi bir kod yazılmalıdır:
body {
background-image: url("https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/icerik/mt.jpg");
background-repeat: repeat-x;
}
Ekran Çıktısı;
Zemin resminin pozisyonu ve tekrarı
Zemin resmi pozisyonu background-position özelliği ile belirlenir. Aşağıdaki kod örneğinde, zemin resmi mt.png'nin tekrar ve pozisyon örneklerini görebilirsiniz:
body {
background-image: url("https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/icerik/mt.jpg");
background-repeat: no-repeat;
}
Ekran Çıktısı;
Shorthand özelliği kullanıldığı zaman, özellik değerlerinin sırası aşağıdaki gibidir:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
| Özellik | Açıklama |
| background | Bütün zemin özelliklerini tek bir bildiride gerçekleştirir. |
| background-attachment |
Zemin resmi sabit mi yoksa sayfanın diğer kısmında hareket
edecek mi bunu belirler.
|
| background-color | Bir elemanın zemin rengini belirler. |
| background-image |
Bir eleman için zemin resmini belirler.
|
| background-position | Zemin resminin başlangıç pozisyonunu belirler. |
| background-repeat | Zemin resminin nasıl tekrarlanacağını belirler. |
Yorumlar
Yorum Gönder