CSS Arka Plan (Background)

CSS Arka Plan (Background)

CSS arka plan özellikleri, öğelere arka plan efektleri eklemek için kullanılır.

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

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)

CSS background-color (Arka Plan Rengi) 

background-color özelliği, bir öğenin arka plan rengini belirtir.

Örnek Kullanım:

body {
  background-color: red;
}

CSS ile bir renk çoğunlukla şu şekilde belirtilir:

• Geçerli bir renk adı - "kırmızı (red)" ile,
• Bir HEX değeri - "#ff0000" ile,
• Bir RGB değeri - "rgb(255,0,0)" ile.

Olası renk değerlerinin tam listesi için CSS Renklere bakın.

Diğer Elemanlar

Herhangi bir HTML öğesi için arka plan rengini ayarlayabilirsiniz.

Örnek:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

Opacity / Transparency (Saydamlık)

Saydamlık özelliği, bir öğenin opaklığını/saydamlığını belirtir. 0.0 - 1.0 arasında bir değer alabilir. Değer ne kadar düşükse, öğe o kadar şeffaftır.

Örnek Kodu:

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

Not: Bir öğenin arka planına saydamlık eklemek için opacity özelliğini kullanırken, tüm alt öğeleri aynı saydamlığı devralır. Bu, tamamen saydam bir öğenin içindeki metnin okunmasını zorlaştırabilir.

RGBA Kullanarak Şeffaflık

Yukarıdaki örneğimizde olduğu gibi alt öğelere opaklık uygulamak istemiyorsanız, RGBA renk değerlerini kullanabilirsiniz. Aşağıdaki örnek, metnin değil arka plan renginin opaklığını ayarlar.

RGB'yi renk değeri olarak kullanabileceğinizi CSS Renkler bölümümüzden öğrendiniz. RGB'ye ek olarak, bir rengin opaklığını belirten alfa kanalı (RGBA) ile bir RGB renk değeri kullanabilirsiniz.

Bir RGBA renk değeri şu şekilde belirtilir: rgba(red, green, blue, alpha). Alfa (alpha) parametresi, 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir sayıdır.

İpucu: CSS Renkler Bölümümüzde RGBA Renkleri hakkında daha fazla bilgi edineceksiniz.

Örnek Kodu:

div {
  background: rgba(0, 128, 0, 0.3) /* %30 opaklığa sahip yeşil arka plan */
}

CSS background-image (Arka Plan Resmi)

background-image özelliği, bir öğenin arka planı olarak kullanılacak bir görüntüyü belirtir.

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

Örnek Kullanım:

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

Arka plan görüntüsü,

öğesi gibi belirli öğeler için de ayarlanabilir.

Örnek Kullanım:

p {
  background-image: url("world.jpg");
}

CSS background-repeat (Arka Plan Tekrar)

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

CSS background-repeat: no-repeat (Arka Plan Tekrarı Yok)

Arka plan görüntüsünün yalnızca bir kez gösterilmesi istiyorsanız bu özelliği kullanmalısınız.

Örnek Kullanım:

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

CSS background-position (Arka Plan Konumu)

background-position özelliği, arka plan görüntüsünün konumunu belirtmek için kullanılır.

Örnek Kullanım:

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

CSS background-attachment (Arka Plan Eki)

background-attachment özelliği, arka plan görüntüsünün kaydırılması mı yoksa sabitlenmesi mi gerektiğini belirler. (Sayfanın geri kalanıyla birlikte kaydırılmaz.)

Örnek Kullanım:

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

Arka plan görüntüsünün sayfanın geri kalanıyla birlikte kaydırılacağını belirlemek için ise bu örneği inceleyebilirsiniz.

Örnek Kullanım:

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

CSS background - Shorthand

Kodu kısaltmak için tüm arka plan özelliklerini tek bir özellikte belirtmek de mümkündür. Buna stenografi özelliği denir.

Örnek Kullanım:

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

Bu kısaltma işlemini sadece background özelliğinin altında da yapabilirsiniz. 

Örnek Kullanım:

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

Shorthand (Steno) özelliğini kullanırken, özellik değerlerinin sırası şöyledir:

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

Tüm CSS Arka Plan Özellikleri