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.
body {
background-color: #c0d5fe;
}
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;
}
Bir başka örneğe bakalım:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #c2c5ff;
}
</style>
</head>
<body>
<h1>CSS SAYFASI</h1>
<p>GELCEGI YAZANLAR</p>
</body>
</html>
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");
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ff0ccc url("https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/icerik/gy_maraton.jpg") no-repeat left top;
padding-right: 150px;
}
</style>
</head>
<body>
<h1>TURKIYE CUMHURIYETI</h1>
<p>ISTANBUL</p>
<p>ANKARA</p>
</body>
</html>
No-repeat özelliği kaldırılınca zemin resmi sayfa boyunca tekrarlanır. Aşağıdaki kodda no-repeat özelliğinin kaldırılmasını görebilirsiniz:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ff0ccc url("https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/icerik/gy_maraton.jpg") left top;
padding-right: 150px;
}
</style>
</head>
<body>
<h1>TURKIYE CUMHURIYETI</h1>
<p>ISTANBUL</p>
<p>ANKARA</p>
</body>
</html>
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;
}
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;
}
body {
background-image: url("https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/icerik/mt.jpg");
background-repeat: no-repeat;
background-position: right top;
}
Zemin kısayol (background shorthand) özelliği
Yukarıda bahsedilen çeşitli özellikleri sadece background sözcüğü ile kısa ve toplu bir şekilde ifade etmek de mümkündür:
body {
background: #fffeee url("https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/icerik/mt.jpg") no-repeat left top;
}
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
Aşağıdaki tabloda zemin özelliklerinin tümü listelenmiştir:
Ö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. |