Web Tasarım ve Prog.Stil Şablonu (CSS) Css Arkaplan Özellikleri (Css Background)

Web sayfalarında herhangi bir nesneye ait arkaplan biçimlendirmesi yapmak için css background özellikleri kullanılır.

Özellik	Açıklama	Css  Versiyonu
background	Bu özellik ile  arkaplan rengi, resmi , resim konumu, tekrar durumu ayarlanabilir.	1
background-attachment	Arka plan resmi sabit yada kaydırma çubuguna bağlı hareketi düzenlenir.	1
background-color	Bir nesnenin arkaplan rengini belirler	1
background-image	Bir nesnenin arkaplanına resim eklemek için kullanılır	1
background-position	Arka plan resminin başlangıç poziyonunu belirler	1
background-repeat	Arka plan resminin tekrar durumunun nasıl olacağını belirler	1

 

Background

Arkaplan biçimlendirmesi tek bir özellik ile birden fazla değer  belirlenmek istendiğinde kullanılabilir.

body {
  background:blue url("resim/bg.jpg") repeat-x;
}

 

background-attachment

Alabileceği Değer	Açıklama
scroll	arka plan resmi kaydırma çubuğu hareketine bağlı olarak hareket eder. Varsayılan değerdir
fixed	Kaydırma çubuğuna bağlı olarak içerik hareket ederken arkaplan resmi sabit kalır.

 

background-color

Arkaplan için bir renk vermemizi sağlar.

body {
  background-color:yellow;
}

 

h1 {
  background-color:#ffff00;
}

 

#dene {
  background-color:rgb(255,255,0);
}

 

background-image

Arkaplan için bir resim eklemizi sağlar. url ile resim yolu belirtilir. Resmin görüntülenmediği yerleri tek renk ile doldurmak istendiginde background-color ile birlikte kullanılabilir.

body {
  background-image:url("resim/zemin.jpg");
}

 

background-repeat

Arkaplan için eklenen resmin tekrar durumunu belirtmekde kullanılır. Varsayılan olarak arkaplan resmi dikeyde ve yatayda tekrarlanır.

Alabileceği Değerler	Açıklama
repeat	Varsayılan değerdir. Resim dikey ve yatay eksende tekrarlanır.
repeat-x	Resmi sadece  yatay eksende tekrarlar.
repeat-y	Resmi sadece dikey eksende tekrarlar.
no-repeat	Resmi tekrarlamaz

 

body {
  background-image:url("resim/zemin.jpg");
  background-repeat:repeat-x;
}

 veya

body {
  background:url("resim/zemin.zpj") repeat-x;
}

 

background-position

Arkaplan için eklenen resmin başlangıç pozisyonunu belirlemek için kullanılır.

Alabileceği Değerler	Description
left top left center left bottom right top right center right bottom center top center center center bottom	Resmin yatayda ve dikeydeki başlangıç konumunu belirlemk için kullanılan değerlerdir. Örneğin left top kullanılırsa resim sol üstten başlar.
x% y%	Resmin konumunun x ekseninde (yatay) ve y ekseninde (dikey)  başlangıç pozisyonunu oransal olarak vermek için kullanılır.
xpos ypos	konumunun x ekseninde (yatay) ve y ekseninde (dikey)  başlangıç pozisyonunu pixel  olarak vermek için kullanılır.

 Örnek :

body {
  background-image:url("resim/zemin.jpg");
  background-repeat:repeat-x;
  background-position:50px 10px;
}

 

body {
  background:url("resim/zemin.jpg") 50px 10px;
 }