Css Arkaplan

Css ile web sitemizin arkaplan özellikleri için background parametresi kullanılmaktadır. Background parametresine ait özellikler:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

özellikleri ile arkaplan rengi belirleme, resim ekleme, tekrarı, sabit kalıp kalmayacağı ve konum özellikleri belirlenmektedir.

Background-color Özelliği

Background-color özelliği ile css dilinde html ögelerinin veya sayfanın arkaplan rengini belirlemek için kullanılmaktadır. Arkaplan rengi css renk kodları veya html renk kodları dersinde anlattığımız renklerin ingilizce isimleri, hex kodları veya rgb kodları ile belirlenebilmektedir.

Background-color Özelliği Kullanımı 1:

Sayfanın arkaplan rengi, renk değerine rengin ingilizce ismi girilerek belirlenen örnektir.

<style type="text/css">

body{

background-color:red;

}

</style>

Kodu Çalıştır

Background-color Özelliği Kullanımı 2:

Sayfanın arkaplan rengi, renk değerine rengin hex kodu girilerek belirlenen örnektir.

<style type="text/css">

body{

background-color:#f01350;

}

</style>

Kodu Çalıştır

Background-color Özelliği Kullanımı 3:

Sayfanın arkaplan rengi, renk değerine rengin rgb kodu girilerek belirlenen örnektir.

<style type="text/css">

body{

background-color:rgb(100,50,200);

}

</style>

Kodu Çalıştır

Background-image Özelliği

Background-image özelliği css dilinde html ögelerinin veya sayfanın arkaplanına resim eklemek için kullanılmaktadır. Background-image özelliği url parametresi ile birlikte kullanılmaktadır. Url parametresine resim adresi girilmektedir.

Background-image özelliği ile istediğimiz resmi web sayfamızın veya html ögelerine arkaplan olarak ekleyebiliriz.

Kullanım Şekli:

body { 

background-image:url("resim_adresi"); 

}

Kodu Çalıştır

Background Özelliği Kullanımı 1:

Herhangi bir html ögesinin arkaplanına resim ekleme işleminin nasıl yapıldığını kodlardan öğrenebilirsiniz. Paragraf genişledikçe arkaplan resmi çoğalacaktır.

p{ 

background-image:url("resim_adresi"); 

}

Kodu Çalıştır

Background Özelliği Kullanımı 2:

Herhangi bir web sayfasının arkaplanına resim ekleme işleminin nasıl yapıldığını aşağıdaki kodlardan öğrenebilirsiniz.

Background-repeat Özelliği

Html web sayfalarında arkaplana eklenen resmin boyutu küçük ise resim otomatik olarak tekrar etmektedir. Yani resim ile sayfayı doldurana kadar çoğaltmaktadır.

Bilgi: Background-repeat özelliği background-image özelliği ile birlikte kullanılmak zorundadır.

Background-repeat özelliği ile resmin tekrar edip etmeme işlemi kontrol edilebilmektedir. Background-repeat özelliği 4 farklı değer alabilmektedir. Bunlar:

Repeat Değeri

Arkaplana eklenen resmin hem dikey hem yatay olarak tekrar etmesi istenilen durumda bu değer kullanılmaktadır. Bu değer ile sayfa dolana kadar tekrar etme işlemi yapar. Varsayılan değer olarak kullanılmaktadır. Arkaplana resim ekleme işlemi yapıldığında background-repeat özelliği kullanılmazsa tekrar etme işlemi yapacaktır. (TEKRAR ET)

Repeat Değeri Kullanımı

body { 

background-image:url("resim_adresi"); 
background-repeat:repeat;

}

Kodu Çalıştır

No-repeat Değeri

Arkaplana eklenen resmin tekrar etmesini istemediğimiz durumlarda no-repeat değeri kullanılmaktadır. (TEKRAR ETME)

No-repeat Değeri Kullanımı

body { 

background-image:url("resim_adresi"); 
background-repeat:no-repeat;

}

Kodu Çalıştır

Repeat-x Değeri

 Arkaplana eklenen resmin x yönünde yani yatay olarak tekrar etmesini istediğimiz durumlarda repeat-x değeri kullanılmaktadır. (YATAY OLARAK TEKRAR ET)

Repeat-x Değeri Kullanımı

body { 

background-image:url("resim_adresi"); 
background-repeat:repeat-x;

}

Kodu Çalıştır

Repeat-y Değeri

Arkaplana eklenen resmin y yönünde yani dikey olarak tekrar etmesini istediğimiz durumlarda repeat-y değeri kullanılmaktadır.(DİKEY OLARAK TEKRAR ET)

Repeat-y Değeri Kullanımı

body { 

background-image:url("resim_adresi"); 
background-repeat:repeat-y;

}

Kodu Çalıştır

Background-attachment Özelliği

Background-attachment özelliği, arkaplan eklediğimiz resmin kaydırma çubuğu ile haraket edip etmeyeceğini belirlemek için kullanılmaktadır. Background-attachment özelliği ile  2 değer kullanılmaktadır. Biri arkaplan resminin kaydırma çubuğu ile hareket etmesini sağlamak için diğeri ise resmin sabit kalması için kullanılmaktadır. Bu değerler:

Scroll Değeri

Arkaplana eklenen resmin kaydırma çubuğu ile birlikte hareket etmesini sağlamak için kullanılmaktadır.

Scroll Değeri Kullanımı

body { 

background-image:url("resim_adresi"); 
background-attachment:scroll;

}

Kodu Çalıştır

Fixed Değeri

Arkaplana eklenen resmin kaydırma çubuğu ile birlikte hareket etmemesini yani sabit kalmasını sağlamak için kullanılmaktadır.

Fixed Değeri Kullanımı

body { 

background-image:url("resim_adresi"); 
background-attachment:fixed;

}

Kodu Çalıştır

Background-position Özelliği

Background-position özelliği, arkaplan resminin konumunu sayfadaki pozisyonunu belirlemek için kullanılmaktadır. 

Top left Değeri

Bu değer kullanıldığında eklenen resim sayfanın üst sol konumunda bulunacaktır.(ÜST SOL)  

Background-position:top left kullanımı

body { 

background-image:url("resim_adresi"); 
background-repeat:no-repeat;
background-position:top left;

}

Kodu Çalıştır

Top center Değeri

Bu değer kullanıldığında eklenen resim sayfanın üst orta  konumunda bulunacaktır.(ÜST ORTA)

Background-position:top center kullanımı

body { 

background-image:url("resim_adresi"); 
background-repeat:no-repeat;
background-position:top center;

}

Kodu Çalıştır

Top right Değeri

Bu değer kullanıldığında eklenen resim sayfanın üst sağ konumunda bulunacaktır.(ÜST SAĞ)

Background-position:top right kullanımı

body { 

background-image:url("resim_adresi");
background-repeat:no-repeat; 
background-position:top right;

}

Kodu Çalıştır

Center left Değeri

Bu değer kullanıldığında eklenen resim sayfanın orta sol konumunda bulunacaktır.(ORTA SOL)

Background-position:center left kullanımı

body { 

background-image:url("resim_adresi"); 
background-repeat:no-repeat;
background-position:center left;

}

Kodu Çalıştır

Center center Değeri

Bu değer kullanıldığında eklenen resim sayfanın orta orta yani tam orta konumunda bulunacaktır.(ORTA ORTA) 

Background-position:center center kullanımı

body { 

background-image:url("resim_adresi"); 
background-repeat:no-repeat;
background-position:center center;

}

Kodu Çalıştır

Center right Değeri

Bu değer kullanıldığında eklenen resim sayfanın orta sağ konumunda bulunacaktır.(ORTA SAĞ)

Background-position:center right kullanımı

body { 

background-image:url("resim_adresi");
background-repeat:no-repeat; 
background-position:center right;

}

Kodu Çalıştır

Bottom left Değeri

Bu değer kullanıldığında eklenen resim sayfanın alt sol konumunda bulunacaktır.(ALT SOL) 

Background-position:bottom left kullanımı

body { 

background-image:url("resim_adresi"); 
background-repeat:no-repeat;
background-position:bottom left;

}

Kodu Çalıştır

Bottom center Değeri

Bu değer kullanıldığında eklenen resim sayfanın alt orta konumunda bulunacaktır.(ALT ORTA)

Background-position:bottom center kullanımı

body { 

background-image:url("resim_adresi"); 
background-repeat:no-repeat;
background-position:bottom center;

}

Kodu Çalıştır

Bottom right Değeri

Bu değer kullanıldığında eklenen resim sayfanın alt sağ konumunda bulunacaktır.(ALT SAĞ) 

Background-position:bottom right kullanımı

body { 

background-image:url("resim_adresi"); 
background-repeat:no-repeat;
background-position:bottom right;

}

Kodu Çalıştır

x% y% Değeri

Yüzde değeri kullanıldığında eklenen resmi yatay ve dikey olarak yüzde ile konum vermemizi sağlar.İlk yüzde yatay konumun, İkinci yüzde dikey konumu ayarlamak için kullanılır.Örneğin: background-position:50% 60%; (YÜZDE İLE KONUM ATAMA) 

Background-position:x% y% kullanımı

body { 

background-image:url("resim_adresi"); 
background-repeat:no-repeat;
background-position:50% 60%;

}

Kodu Çalıştır

xpos ypos Değeri

rkaplana eklenen resme yatay ve dikey olarak piksel ile konum vermek için kullanılır. İlk piksel yatay, İkinci piksel dikey konumu ayarlamak için kullanılır. Örneğin: background-position:250px 200px;  (PİKSEL İLE KONUM ATAMA) 

Background-position:xpx ypx kullanımı

body { 

background-image:url("resim_adresi"); 
background-repeat:no-repeat;
background-position:250px 200px;

}

Kodu Çalıştır

Önceki Ders: Css Renkler Sonraki Ders: Css Boyut