Css Ders 7 | Arka Plan

CSS arka plan özellikleri, öğeler için arka plan efektlerini tanımlamak için kullanılır.

Bu bölümlerde, aşağıdaki CSS arka plan özelliklerini öğreneceksiniz:

CSS arka plan rengi

background-color Nitelik bir elemanın arka plan rengini belirler.

body {
  background-color: lightblue;
}

CSS ile renk genellikle şu şekilde belirtilir:

opacity Nitelik bir elemanın şeffaflığı belirtir. 0.0 – 1.0 arasında bir değer alabilir. Değer ne kadar düşükse, o kadar şeffaftır:

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

background-image Nitelik bir elemanın arka plan olarak kullanmak üzere bir görüntü belirtir.

Varsayılan olarak, görüntü tüm öğeyi kaplayacak şekilde tekrarlanır.

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

Varsayılan olarak, background-image özellik bir görüntüyü hem yatay hem de dikey olarak tekrarlar.

Bazı resimler yalnızca yatay veya dikey olarak tekrarlanmalıdır, aksi takdirde tuhaf görüneceklerdir.

Yatay olarak tekrarlamak için: background-repeat: repeat-x;

Bir görüntüyü dikey olarak tekrarlamak için, background-repeat: repeat-y;

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
  background-repeat: repeat-y;
}

Bir görüntüyü yalnızca bir kez göstermek için yani tekrarlamamak için, background-repeat:no-repeat; kullanıyoruz.

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

background-position arka plan resminin konumunu belirtmek için kullanılır.

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

Örnekte, resmi sağ üst köşeye yerleştirmiş olduk.

Arkaplan özelliklerini tek bir bildirimde birleştirmek için ise aşağıdaki kod bloğu gibi yazabiliriz.

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