CSS’de Arkaplan Özellikleri

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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:

1
<div id="yazi">yakında...</div>

Ş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. Alabileceği değerler;

1
2
3
4
background-repeat:repeat/*Hem yana hemde aşağı doğru tekrar et*/
background-repeat:repeat-x;    /*Sadace yana doğru tekrar et*/
background-repeat:repeat-y;    /*Sadece aşağı doğru tekrar et*/
background-repeat:no-repeat;   /*Hiçbir şekilde tekrar etme*/

 

  • background-position:inherit;

 

Arkaplana atanan resim nereden başlayıp tekrar edeceğini belirler. Alabileceği değerler;

1
2
3
4
5
6
7
8
9
background-position:bottom;     /*Alt*/
background-position:center;     /*Orta*/
background-position:left;       /*Sol*/
background-position:right;      /*Sağ*/
background-position:top;        /*Üst*/
   /*Değişik konumlandırmalar*/
background-position:top-right;      /*Sağ-Üst*/
background-position:bottom-left;    /*Sol-Alt*/
   /*Daha da değiştirilebilir*/

 

  • background-attachment: fixed;

 

Arkaplana eklenen resmin sayfa ile kayıp kaymamasını belirler. Alabileceği değerler;

1
2
background-attachment:scroll;     /*Sayfa ile birlikte kayar*/
background-attachment:fixed;     /*Sabittir*/

Yorum yap

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir