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…

“CSS ile blogunuzu şenlendirin -3” üzerine 8 yorum

  1. 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 :)

    Cevapla
  2. @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…

    Cevapla
  3. 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ı ?

    Cevapla

Yorum yapın

teakolik hamza şamlıoğlu blog logo

Wordpress altyapısını kullandığımız bu sistem, Sunucu Çözümleri firmasında yüksek performans sağlayan özel sunucularda barındırılmaktadır. Görüntülemek için en iyi Chrome tarayıcı, 1920x1080 çözünürlük ve Full HD Android telefonlarda çalışır. Ayrıca Sitedeki içeriği istediğiniz gibi çarpabilirsiniz. :)