CSS Arka Plan (Background)

CSS arka plan(Background) özellikleri bir elemana arka plan efektleri tanımlamak için kullanılır.

Background için kullanılan CSS özellikleri:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

1- background-color :
Bu özellik bir elemana arka plan rengini verir.

body { background-color: #b0c4de; }

2- background-image:
Bu özellik bir elemana arka plan olarak kullanmak üzere bir resim belirtir. Varsayılan olarak belirtilen resim arka planda tekrarlanır.

body { background-image: url("background.png"); }

3- background-repeat :
Arka plan resimleri varsayılan olarak hem yatay hemde diket olatak tekrarlanır.Bu tekrarlama işlemini background-repeat ile sadece yatayda veya sadece dikeyde yapabiliriz.

body { 
   background-image: url("background.png");
   background-repeat: repeat-x;   /* x yönünde(yatay) tekrarlar */
   background-repeat: repeat-y;   /* y yönünde(dikey) tekrarlar */
   background-repeat: no-repeat;   /* Tekrarlama olmaz */
}

4- background-attachment :
Bu özellik arka plana eklenen resmin sayfa ile haraket etmesini veya sayfanın zeminin de sabit kalmasını sağlar.

body {
   background-image: url("background.png");
   background-attachment:scroll;   /* sayfa ile haraket eder*/
   background-attachment:fixed;   /* arka planda sabit kalır*/
}

5- background-position :
Bu özellik background-image ile belirlenen resmin başlangıç noktasını belirler. Bu özellik sadece block-level ve IMG, INPUT, TEXTAREA, SELECT, ve OBJECT gibi kendine ait boyutları olan replaced elemanlara uygulanır.

body {
   background-image: url("background.png");
   Background-position:right;   /*sağa hizalı*/
   Background-position:left;   /*sola hizalı*/
   Background-position:top;   /*yukarı hizalı*/
   Background-position:bottom;   /*aşağıdya hizalı*/
   Background-position:center;   /*ortada*/
}