Arkaplan Biçimi
CSS DERSLERİ
 |
 |
Ders4: Arkaplan Biçimi
HTML derslerinde sayfanın arkaplanını değiştirmek için <body> komutuna bgcolor="..." parametresini atıyorduk. Bu parametre tablolar veya diğer kodlar (h1-h6, marquee,vb...)için de geçerliydi.
Arkaplan Rengi
CSS'de ise bu kodların background-color özelliğine renk değerleri veriyoruz.
Arkaplan Resmi
HTML'de arkaplana resim koymak için background="..." parametresinden yararlanıyorduk. CSS'de arkaplan resmi yerleştirmek için background-image (arkaplan görüntüsü) özelliğine url(...) şeklinde adres değeri veririz. Eğer arkaplana resim koymak istemiyorsak none değeri veririz. Not:Arkaplan resmi istemezseniz, hiç bu özelliği yazmazsınız, olur biter. Ama DHTML derslerinde bu none değerinin faydalarını göreceksiniz.
Arkaplan Resmini Döşeme
HTML'de arkaplan resimleri kendisini tekrarlıyordu. Oysa biz arkaplan resimlerinin her zaman döşenmesini (kendisini tekrar etmesini) istemeyiz. CSS'de bunun için çok güzel bir özellik var: background-repeat. Bu özelliğin alacağı değerler şöyle:
| repeat | Arkaplan resmini hem yatay hem de düşey olarak döşer (tekrarlar). |
| background-repeat: repeat | |
| repeat-x | Arkaplan resmini sadece yatay olarak döşer. |
| background-repeat: repeat-x | |
| repeat-y | Arkaplan resmini sadece düşey olarak döşer. |
| background-repeat: repeat-y | |
| no-repeat | Arkaplan resmini döşemeden, tek bir resim halinde gösterir. |
| background-repeat:no-repeat |
Arkaplan Resminin Konumu
Sayfamızın arkaplanında tek bir resim yer alacaksa, bu resmin sayfa üzerindeki konumunu belirlemeliyiz. Bunun için CSS'nin background-position özelliğinden yararlanırız. Bu özellik iki değer birden alır, ilk değer resmin sayfaya göre düşey konumunu, ikinci değer ise resmin sayfaya göre yatay konumunu ifade eder. background-position: (düşey konum değeri) (yatay konum değeri). Bu değerleri aşağıdaki biçimlerde yazabiliriz. Not: Bu özelliği NN gözatıcıları (browser) desteklemiyor.
| background-position: | top left |
| background-position: | top center |
| background-position: | top right |
| background-position: | center left |
| background-position: | center center |
| background-position: | center right |
| background-position: | bottom left |
| background-position: | bottom center |
| background-position: | bottom right |
| background-position: | (yüzde değer) (yüzde değer) |
| background-position: | (birim değer) (birim değer) |
Arkaplan Resmini Sabitleme
Netscape gözatıcılarının tanımadığı bir diğer özellik de background-attachment. Bu özellikle arkaplan resminin sayfayla beraber kayıp kaymayacağını belirliyoruz. Eğer bu özelliğe scroll değerini verirsek, sayfamızla beraber arkaplan resmi de scrollbar ile beraber kayar. Eğer fixed değerini verirsek arkaplan resminin konumu scrollbara göre değişmez, sabit kalır.
Arkaplan Resim Özelliklerini Tek Kodla İfade Etme
Bir arkaplan resmini CSS'de ifade etmek için; son uygulamamızda olduğu gibi, dört özellikten yararlanmamız şart değil. Bu özelliklerin hepsini background özelliğinde toplayabiliriz: background: (background-color değeri) (background-image değeri) (background-repeat değeri) (background-attachment değeri) (background-position değeri).
Burada Netscape gözatıcısı kullananlar bu kodun daha önce belirttiğim background-positon, background-attachment bölümlerini göremezler ama geri kalan kısımlarını görürler.