Css ID Class ve Etiket Seçiciler
Css Font Özellikleri
 

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

 

Ekleyen:admin

Adınız
:
Eposta
:



Resmi Degistir


vuhuv.com.tr