CSS RGBA Kullanımı

RGBA renk değeri şununla belirtilir: rgba (kırmızı, yeşil, mavi, alfa). Alfa parametresi 0,0 (tamamen şeffaf) ile 1,0 (tamamen opak) arasında bir sayıyı belirtir.

 
 
 
 
div {
background: rgba(0, 128, 0, 0.2) /* Arka plan rengi yeşil ve %20 oranında şeffalık mevcut */
}
 
 
Backgraound-image : arka plan resmi

CSS "background-image" özelliği, bir etiketin arka plan resmi eklememizi olanak sağlar.Varsayılan olarak arka plan resmi tüm alanı kaplayacak şekilde tekrarlanır. Background-image özelliğine değer olarak, görselin url adresi yazılır. Url adresi yazılırken url() deyimi kullanılır ve bu deyim içerisine görsel adresi yazılır.

CSS background-image kullanımı :

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

background-repeat : Arka Plan Tekrarı

CSS "background-repeat" özelliği, görselin arka plandaki tekrar sayısını belirtir. Varsayılan olarak, background-image özelliği bir görüntüyü hem yatay hem de dikey olarak tekrarlar.

  • Bir görselin sadece yatay olarak tekrarlanmasını istiyorsak : background-repeat : repeat-x;
  • Bir görselin sadece dikey olarak tekrarlanmasını istiyorsak : background-repeat : repeat-y;
  • Bir görselin bir sefer kullanılıp tekrarlanmasını istemiyorsak : background-repeat : no-repeat;

özellikleri kullanılır.

CSS background-repeat kullanımı :

p.yatay {
background-image: url("arkaplan-yatay.png");
background-repeat: repeat-x;
}
 
p.dikey{
background-image: url("arkaplan-dikey.png");
background-repeat: repeat-y;
}
 
p {
background-image: url("arkaplan.png");
background-repeat: no-repeat;
}

background-position : Arka Plan Konumu

CSS "background-position" özelliği , arka plan görselinin konumu belirlemek için kullanılır. 

CSS background-position kullanımı :

body {
background-image: url("gorsel.png");
background-repeat: no-repeat;
background-position: left top;
}

Örnekte görüldüğü üzere, arka plan görseli sol üst köşeye konumlandırılmıştır. Konumlandırma olarak kullanabileceğimiz değeler :

  • left (sol),
  • right (sağ),
  • top (üst),
  • bottom (alt),
  • left top (sol üst)
  • left bottom (sol alt)
  • right top (sağ üst)
  • right bottom (sağ alt)

background-attachment : Arka Plan Ekleri

CSS "background-attachment" özelliği, arka plan görselinin ekranda kaydırılıp kaydırılmayacağını veya sabitleneceğini belirtir. Bu özelliğin iki değeri vardır  :

  • fixed : görselin ekranda hep sabit kalmasını belirtir.
  • scroll : görselin sayfanın geri kalanıyla birlikte kaydırılması gerektiğini belirtir.

CSS background-attachment kullanımı :

body {
background-image: url("gorsel.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

CSS Background Kısa Kullanımı 

CSS'de background özelliklerini ayrı ayrı yazmak yerine tek bir satırda yazabiliriz.Bunun için sadece "background" özelliğini kullanmak yeterlidir. Bu özelliğin değerlerine sırasıyla :

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

şeklinde tanımlanabilir.

body {
background-color: #ffffff;
background-image: url("gorsel.png");
background-repeat: no-repeat;
background-position: left top;
}

Bu örnekteki background özelliklerini tek bir satırda yazabiliriz :

 
 
 
 
body {
background: #ffffff url("gorsel.png") no-repeat left top;
}