Css ile blogunuzu şenlendirin -2

Merhaba arkadaşlar geçen günki yazımda sizlere CSS ile blogunuzun temasına bir header nasıl ekleyebileceğinizden bahsetmiştim.

Bugünde gelin beraber blogumuzun arka planına bir desen ekleyelim.  Dikkat ettiyseniz standart temada olmayan bir değişiklik yapıyorum.  Bu akşamki yazımda sizlere arka plana bir resim nasıl ekleyebileceğimizi anlatacağım.

Öncelikle temamız içerisinde Stil kodlarımızın bulunduğu Style.CSS dosyamızı açıyoruz. Temamızın Style.CSS dosyası içerisinde genelde aşağıdaki gibi arkaplan rengi kodlaması bulunmaktadır.

body {
background: #FF0000;
color:#333;
font-family:”BitStream vera Sans”,Verdana,Arial,Helvetica,Verdana,san;
font-size:12px;
}

Bu kodlama içersindeki background: değeri arkaplan renklendirmesini belirtir.  Hemen yanındaki kod ise arka plan rengimizin kodudur.  Biz bu kodu önceki yazımda anlattığım gibi header resmini belirttiğimiz gibi arkaplan resmimizi belirteceğiz.

Peki arka plan resmini nereden bulacağız ?

Docums.Net’den Adnan arkadaşımın tavsiyesi üzerine gezdiğim bir internet sayfasını size tavsiye edebilirim. Çok güzel arkaplan resimleri var.

http://www.squidfingers.com/patterns/11/

Adresindeki arka plan resimlerinen blogunuza uygun bir resim bulup bilgisayarınıza indiriyorsunuz. İndirdiğimiz resimi yine FTP adresimizdeki Tema klasörümüzün içinde /images dizinimize kayıt ediyoruz.

CSS dosyamızın içerisindeki kodumuza resmimizi gösteriyoruz.

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

Yine bu kodumuzun açılımında  background: url(images/tea_bg.gif); kısmına dikkat ederseniz renk kodumuzu sildik ve yerine  images dizinimize attığımız resmimizin ismini girdik.  Böylelikle temamız arka plan rengi yerine bize arka plan resmini gösterecektir. Dosyamızı kayıt edip çıktıktan sonra F5 tuşu ile Web sayfamızı yenilersek yepyeni arka planımızı web sayfamızda görebiliriz.

Gördüğünüz gibi ….  Burada dikkatinizi bir noktaya çekmek istiyorum. Dikkat ettiyseniz ufak bir resim ile tüm arka planımızı kapladık.  Önceki yazımda hatırlarsanız  no-repeat; Komutunu kullanmıştık.  Bu kodu resmimizi belirttiğimiz satıra eklemedik.  Görebildiğiniz gibi ufak bir arka plan resmini tekrarlayarak tüm arka planı bir duvar kağıdı gibi birbirine ekleyerek döşedik.

Haa yok ben arka planı tamamiyle kaplayacak kadar büyük bir resim koyacağım derseniz o zaman kodlarımız şu şekilde olacaktı.

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

Bu sayede resmimiz tek olacak ve arka planda tekrarlanmayacak…

CSS ile butip atraksiyonlar yapabilirsiniz. Gerisi HTML bilginize ve Hayal gücünüze kalmış…

Bu arada Tema’yı kullanmak isteyenler varsa ;

“Css ile blogunuzu şenlendirin -2” üzerine 7 yorum

  1. Eline sağlık abi , CSS konusunda eskiden hiç bişey bilmiyordum.Şimdilerde ise bişeyler canlanmaya başladı.

    Ayrıca çok net anlatmışsın , anlamamak için çabalamak lazım.

    Cevapla
  2. Öncelikle bilgilendirme için teşekkürler.

    Pratik ve faydalı bilgilendirme serisinin devamını bekliyorum. Benim gibi CSS ile ilgili bilgisi olmayan kişiler için bu seri güzel bir başlangıç olabilir…

    Cevapla
  3. açık anlatım için teşekkürler abi…lakin benim bir sorum olacak; biz bu arka planı sabitlemek için napabiliriz. yani arka plan sabit, biz sayfamızı aşağı doğru indirsekde arka planın kaymayacağı birşey…sanırım anlatmak istediğimi anlatabildim…tekrar teşekkürler….

    Cevapla
  4. @JunkChorn
    Teşekkürler dostum elimden geldiğince açık olmaya çalıştım.
    @dontEnter
    Derslere devam :)
    @meraksavar
    Vakit bulursam yazacağım sağolasın.
    @mcakir
    Hmmm anladım onuda anlatırım :)

    Cevapla

JunkChorn için bir cevap yazın Cevabı iptal et

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