CSS ile blogunuzu şenlendirin -3
Tarih: 30 Aralık 2008 | Yazar: TEAkolik
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…
abi öncelikle çok teşekkürler…
şöyle birşey sormak istiyorum; koyduğumuz resmin tekrarlanmasını repeat-x ve repeat-y değerleriyle yapabiliyorduk, ayrıca eger tekrarlanmasını istemiyorsak no-repeat değeriydi…ve arka plan resmimizi margin:0 padding:0 değerleriyle sabitliyorduk(ki onu da şimdi öğrendim)…ama benim kafam halen karışık; mesela sizin sitenizin alt yazılara bakmak için aşağı doğru hareketimizde arka planda kayıyor ki bu hissediliyor..ama ben bi sitede görmüştüm, biz sayfanın alt kısımlarına inerken arka plan sabit kalıp, site hareketleniyordu…abi kusura bakma anlatmak istediiğimi zannedersem örnek bir site bulduktan sonra anlatabileceğim
@mcakir
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;
}
bu kod aynen söylediğin şeyi yapıyor arkadaşım. Arkaplan sabit yazılar yani tema aşağı doğru kayar…
teşekkürler …
abi anlatmak istediğim burdaki adreste var..kusura bakma, arka plana koyacağımız resmin genişliği ve yüksekliği istediğimiz sabitlikte mi olmalı ?
@mcakir
Aynen öyle kaça kaç koyarsan aynen öyle çıkacaktır.
kusura bakma abi, fazla baş ağrısı yaptık galiba
çok teşekkür ederim…
@mcakir
Birşey değil yardımcı olabildiğime sevindim.
faydalı bir bilgi bende arkaplana uygun bi resim bulunca deneyeceğim.