Sayfadaki nesnelere zemin rengi verme, arka plana resim ekleme veya bu olayların nasıl davranışlar sergileyeceklerini belirleyen parametredir.
Genel kullanımı:
seçici {background: color image repeat attachment background-position;}
şeklindedir. Özellikleri tek satırda verebileceğiniz gibi ayrı ayrıda tanımlayabilirsiniz. Şimdi sırayla css backgorund(zemin) özelliklerini ve alabileceği değerleri inceleyelim
background-color
Sayfanın zemin rengini belirlemek için kullanılır. Renk değeri renklerin ingilizce isimleri, RGB değeri veya 16’lık sayı sistemindeki kod karşılığı da olabilir.
Renk Tablosu ve Değerleri
- aqua – aqua = #00ffff = rgb(0,255,255)
- Siyah – black = #000000 = rgb(0,0,0)
- Mavi – blue = #0000ff = rgb(0,0,255)
- fuchsia – fuchsia = #ff00ff = rgb(255,0,255)
- gri – gray = #808080 = rgb(128,128,128)
- yeşil – green = #008000 = rgb(0,128,0)
- Kireç – lime = #00ff00 = rgb(0,255,0)
- Kestane – maroon = #800000 = rgb(128,0,0)
- lacivert – navy = #000080 = rgb(0,0,128)
- olive – olive = #808000 = rgb(128,128,0)
- truncu – orange = #ffa500 = rgb(255,165,0)
- mor – purple = #800080 = rgb(128,0,128)
- kırmızı – red = #ff0000 = rgb(255,0,0)
- gümüş – silver = #c0c0c0 = rgb(192,192,192)
- turkuaz – teal = #008080 = rgb(0,128,128)
- beyaz – white = #ffffff = rgb(255,255,255)
- sarı – yellow = #ffff00 = rgb(255,255,0)
Kullanım Örneği
body {
background-color: yellow;
}
h1 {
background-color: #00ff00;
}
p {
background-color: rgb(255,0,255);
}
background-image
Kullanıldığı nesnenin arka planına resim eklemek için kullanılır.
Kullanım Örneği
body {
background-image: url("resim.jpg");
background-color: #cccccc;
}
background-repeat
Arka plana eklenen resmin tekrarlanma biçimi ayarlamak için kullanılır.
Kullanım Örneği
body {
background-image: url("resim.jpg);
background-repeat: repeat-x;
}
| Değer | Açıklma |
|---|---|
| repeat | Yatay ve dikey konumda eklenen resmin tekrarlanmasını sağlar default değerdir |
| repeat-x | Eklenen resmin X ekseninde tekrarlanmasını sağlar |
| repeat-y | Eklenen resmin Y ekseninde tekrarlanmasını sağlar |
| no-repeat | Eklenen resmin tekarsız bir şekilde ekranda bir kere görüntülenmesi sağlar |
background-attachment
Sayfaya eklenen arkaplanın kaydırma çubuğu ile hareket edip etmeyeceğini ayarlar. Default değeri “scroll”‘dur . Scroll ve Fixed değerlerini alabilir. Scroll olduğu zaman kaydırma çubuğu ile hareket eder, fixed seçildiği zaman resim sayfada sabit kalır.
Kullanım Örneği
<html>
<head>
<title>www.bilisimogretmeni.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-attachment: scroll;
background-image: url("resim.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
<h1>background-attachment: scroll özelliği </h1>
</body>
</html>
Fixed kullanımı
<html>
<head>
<title>www.bilisimogretmeni.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-attachment: fixed;
background-image: url("resim.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
<h1>background-attachment: fixed özelliği </h1>
</body>
</html>
background-position
Zemin olarak ayarlanan resmin hangi pozisyondan itibaren görüntüleneceğini ayarlar. Alabileceği Değerler
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos
Kullanım örneği
body {
background-image: url('resim.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;}
resim.jpg dosyası sayfanın ortasında yer alır.
Şimdilik bu kadar bundan sonraki konuda CSS Font ve Tezt özelliklerinden bahsedeceğiz.
