CSS Arkaplan ozellikleri
CSS ile tasarim yaparken sayfalarimizin daha renkli, daha hos gorunmesi icin renk atayabilir veya icerigimizle alakali resimler, dolgular ekleyebiliriz. Bunun disinda CSS 'nin nimetlerinden faydalanarakta cok cesitli ozellikler ekleyerek daha farkli gorunmesini saglayabiliriz.

Arkaplan ozellikleri
background-color
background-image
background-repeat
background-attachment
background-position
background

background-color
Bu ozellik arkadaplanimizin rengini belirler. Buraya rengin adi veya kodlarini verebiliriz.

/*ornek 1*/
body {
background: blue;
}
/*ornek 2*/
body {
background: #0000FF;
}
/*ornek 3*/
body {
background: rgb(0,0,255);
}


background-image
Bu ozellik ile arka planimiza istedigimiz bir resmin eklenmesini sagliyoruz.

body {
background-image: url(deneme.gif);
}


background-repeat
Bu ozelligimiz arka plana eklenen resmin tekrarlanmasini ve tekrarlanma ozelliklerini belirler.
Baslangic degeri: repeat

/*repeat: resim tekrarlanir*/
body {
background-image: url(deneme.gif);
background-repeat: repeat;
}
/*no-repeat: eklenen arka plan sadece 1 kez gorunur */
body {
background-image: url(deneme.gif);
background-repeat: no-repeat;
}
/*repeat-x: eklenen resim yatay bicimde tekrarlanir*/
body {
background-image: url(deneme.gif);
background-repeat: repeat-x;
}
/*repeat-y: eklenen resim dikey bicimde tekrarlanir*/
body {
background-image: url(deneme.gif);
background-repeat: repeat-y;
}


background-attachment
Eklenen arka plan resminin sayfa ile birlikte hareket etmesini veya sabitlenmesini saglayan bir ozellik.
Baslangic degeri: scroll

/*scroll: eklenen resim sayfa ile hareket eder*/
body {
background-image: url(deneme.gif);
background-attachment: scroll;
}
/*fixed: eklenen resim sabit kalir*/
body {
background-image: url(deneme.gif);
background-attachment: repeat-y;
}


background-position
Bu ozellik ise eklenen resmin sayfadaki konumunu belirlemeye yarar.
Baslangic degeri: 0px 0px veya 0% 0% 'dir. Ilki dikey, ikincisi yatay konumu belirtir.
Ayrica;
Yatay degerler icin: left, center, right
Dikey degerler icin: top, center, bottom

/*ornek 1*/
body {
background-image: url(deneme.gif);
background-position: 100px 100px;
}
/*ornek 2*/
body {
background-image: url(deneme.gif);
background-position: 50% 50% ;
}
/*ornek 3*/
body {
background-image: url(deneme.gif);
background-position: top left;
}


background
Butun bu ozellikleri tek tek kullanabilecegimiz gibi hepsini sadece background ozelliginin icinde kullanabiliriz.

body {
background: #0000FF url(deneme.gif) repeat-x top left fixed
}

June 4, 2009
Ayberk Atasay
CSS
1 yorum