CSS ile blogunuzu şenlendirin -3

Merhaba arkadaşlar önceki yazımda sizlere blogumuzda arka plan resmi kullanmaktan bahsetmiştim.  Mcakir arkadaşım yaptığı yorumda arka plan resmini sabitlemeyi nasıl yapacağımızı sormuştu. Gelin şimdide bu sorunu cevabını bulalım…

Aslında bu sorunun cevabından önce diğer makaleyi okumayanlar için kısaca bahsedeyim.  Blogumuza arka plan resmini koyarken Style.CSS dosyamız içerisindeki şu kodu oluşturmuştuk. Eski kodda renk kodu verken bir renk kodumuzu kaldırdık ve arkaplan resmimizin yerini gösterdik.

body {
background: url(images/tea_bg.gif);
color:#333;
font-family:”BitStream vera Sans”,Verdana,Arial,Helvetica,Verdana,san;
font-size:12px;
}

Bu koda eğer no-repeat eklersek arka plan resmimiz bir tane çıkmaktaydı. Arka plan resmimizi no-repeat kullanmadan yani tekrarlayarak güzel bir desen oluşturuyoruz.

Şimdi eğer arka plan resmimizi tek bir tane yapıp onunda arka planda sabit olarak kalmasını istersek  ne yapacağımızdan bahsedelim.

Öncelikle arka plan resmimizi 1 tane kullanmalıyız.  Çünkü arka plan resmimizi sabit olarak görmek istiyoruz. İşte burada no-repeat devreye giriyor…

body {
background: url(images/tea_bg.gif) no-repeat;
margin: 0px;
padding: 0px;
color:#333;
font-family:”BitStream vera Sans”,Verdana,Arial,Helvetica,Verdana,san;
font-size:12px;
}

Gördüğünüz gibi background: url(images/tea_bg.gif) no-repeat; satırına dikkat ederseniz No-Repeat kullandık çünkü resmimiz tekrarlamayacak. Ayrıca fazladan 2 kod daha ekledik. Bu kodlar sayesinde resmi sabitlemekteyiz.

margin: 0px;
padding: 0px;

Bu iki kod sayesinde resmimiz sol üst tarafa sabitlenecektir. İsterseniz margin ve padding  değerlerini 10 – 20 – 100 – 400  … gibi rakamlar vererek üstten ve soldan boşlular bırakarak hizalayabiliriz. Hadi kolay gelsin…