CSS Dersleri 6 - Background (Arka Plan)

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Backgrounds (Arka Plan) konusunu öğreneceğiz.

CSS'de arka plan özelliği, HTML etiketleri için arka plan efektlerini tanımlamak için kullanılır. 

background-color : Arka Plan Rengi

CSS'de background-color özelliği ile etiketlerimizin arka plan renklerini belirleyebiliriz.

body {
  background-color: blue;
}

CSS ile renk genellikle şu şekilde belirtilir:

• Renk adlarıyla
• HEX kodlarıyla
• RGB kodlarıyla

CSS'de renkleri detaylı öğrenmek için "CSS Dersleri 5 - Renkler" tıklayınız.

opacity : Şeffaflık 

CSS'de opacity özelliği , bir etiketin opaklığını / şeffaflığını belirtir. 0.0 - 1.0 arasında bir değer alır. Opaklık değeri ne kadar düşükse, arka plan rengi o kadar şeffaftır.

CSS opacity kullanımı :

div {
  background-color: blue;
  opacity: 0.3;
}

Not : Bir etiket için "opacity" özelliği kullandığımız zaman, o etikete ait tüm alt etiketlerinde arka planları şeffaf olacaktır ve bu durumdan etkilenecektir.

RGBA Değerlerinde Şeffaflık

CSS'de bir etiket için "opacity" özelliği kullandığımızda, alt etiketlerinde bu durumdan etkilendiğinden bahsetmiştik. Eğer sadece ilgili etiketin şeffaflığını ayarlamak istiyorsanız "RGBA" kullanabilirsiniz.

Önceki derslerimizde CSS'de Renkler konusunda RGB değerlerini kullanmayı öğrenmiştik. RGB'ye ek olarak, bir rengin opaklığını belirleyen alfa kanallı olan (RGBA) bir RGB renk değeri de kullanabilirsiniz.

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  */
}

background-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;
}