Bugün hem arkaplan özeliklerinden bahsedip hem de basit bir anasayfa tasarımı yani index oluşturacağız. Bir sitenin arkaplanını CSS‘de oluşturmak için bilmemiz gereken bazı kodlar vardır. Bunlar arkaplanın resmini, konumunu, tekrar edip etmediğini ve posizyonunu belirler. Yapacağımız anasayfa tasarımında arkaplanı kaplayan bir resim, ve onun üzerinde ekranın belirli bir yerinde yer alan “yakında…” yazısı yer alacak. Tüm bunları yaparken sadece CSS kullanacağım. Şimdi ise anasayfa tasarımında kullandığım tüm kodları paylaşıp onlar üzerinde hangi kodun ne işe yaradığından bahsedeyim.
CSS Kodumuz:
body{
margin:auto;
background-image:url(bg.jpg);
background-repeat:no-repeat;
background-position:inherit;
background-attachment:fixed;
}
#yazi{
position:absolute;
top:25px;
left:250px;
font-family:Myriad pro;
font-size:36px;
color:#FFF;
}
HTML Kodumuz:
yakında...
Şimdi sıra ile yazdığımız özeliklerden bahsedelim.

background-image: url(bg.jpg);

Arkaplan resmini bu özellik ile belirliyorum. bg.jpg resmi, index.html ve style.css ile aynı dosya içinde olduğundan doğrudan bg.jpg olarak tanımlıyorum. Eğer bir alt dosyada olsaydı resimler/bg.jpg olarak tanımlayacaktım.

background-repeat: no-repeat;

Repeat yani tekrar… Küçük bir arkaplan tanımladığım zaman bunun ekranı kaplaması için bu özelliği kullanıyorum. Ben tasarımımda büyük bir resim seçtiğimden dolayı “no-repeat” yani tekrar etme komutunu uyguladım.

background-position:inherit;

Arkaplana atanan resim nereden başlayıp tekrar edeceğini belirler.

background-attachment: fixed;

Arkaplana eklenen resmin sayfa ile kayıp kaymamasını belirler.

Not: Kaynak dosyaları kendi dizinime attığım için background-image: url(bg.jpg); kısmındaki resmin adresini doğrudan bir internet sitesine yönlendirdim. Böylece az da olsa yer tasarrufu etmiş oldum (:

Kaynak dosya şifresi: www.ugurdalkiran.com

Kaynak Dosyaları İndir

Anasayfa Tasarımını Görüntüle

Kaynak ve Yazının Devamı İçin: http://ugurdalkiran.com/cssde-arkaplan-ozellikleri.html