Css Dersleri – Background Özellikleri

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;
}

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.