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 ;

• Blocks2 Orjinal versiyonu ve önizlemesi
• Blocks2 Orjinal versiyon Türkçe Dil dosyası
• Blocks2 düzenlediğim yeni versiyon ve önizlemesi
• Blocks2 düzenlediğim yeni versiyon Türkçe Dil dosyası