CSS Arka Planlar (Backgrounds)

CSS ile bir web sayfasının arka planını özelleştirmek, site tasarımında önemli bir rol oynar. Arka planlar, sayfanın görünümünü ve hissiyatını etkileyen temel stil özellikleridir. CSS’de arka planlar renkler, resimler, gradyanlar ve farklı konumlandırma seçenekleri ile kontrol edilebilir.

1. background-color (Arka Plan Rengi)

Bir elementin arka plan rengini belirlemek için background-color özelliği kullanılır. Renkleri tanımlarken isimler, hex kodları veya RGB/rgba değerleri kullanılabilir.

body {
  background-color: #f0f0f0; /* Hexadecimal renk kodu */
}

div {
  background-color: rgba(255, 0, 0, 0.5); /* Yarı saydam kırmızı renk */
}

2. background-image (Arka Plan Resmi)

Bir elementin arka planına resim eklemek için background-image özelliği kullanılır. Arka plan resmi bir URL ile tanımlanır.

body {
  background-image: url('background.jpg'); /* Resmin yolu */
}

3. background-repeat (Tekrarlama)

Arka plan resminin nasıl tekrarlanacağını belirlemek için background-repeat kullanılır. Resim dikey veya yatay eksende tekrarlanabilir, ya da hiç tekrar edilmeyebilir.

body {
  background-image: url('pattern.png');
  background-repeat: repeat; /* Dikey ve yatay tekrar */
}

header {
  background-image: url('banner.jpg');
  background-repeat: no-repeat; /* Tekrar yok */
}

4. background-position (Konumlandırma)

Arka plan resminin konumunu ayarlamak için background-position kullanılır. Örneğin, resmi sağ üst köşeye ya da merkeze yerleştirebilirsiniz.

header {
  background-image: url('header-bg.jpg');
  background-position: center; /* Ortaya yerleştirir */
}

footer {
  background-image: url('footer-bg.jpg');
  background-position: right bottom; /* Sağ alta yerleştirir */
}

5. background-size (Boyutlandırma)

Arka plan resminin boyutunu kontrol etmek için background-size kullanılır. Resmi genişletip küçültebilir ya da kapsama (cover) ve sığdırma (contain) seçenekleriyle tam uyumlu hale getirebilirsiniz.

section {
  background-image: url('large-image.jpg');
  background-size: cover; /* Alanı tamamen kaplar */
}

div {
  background-image: url('logo.png');
  background-size: 100px 100px; /* 100x100 piksel boyutunda */
}

6. background-attachment (Sabit Arka Plan)

Arka planın kaydırılabilir ya da sabit olup olmadığını belirlemek için background-attachment kullanılır. fixed değeri, arka planı sayfa kaydırıldığında sabit tutar.

body {
  background-image: url('fixed-background.jpg');
  background-attachment: fixed; /* Sabit arka plan */
}

7. background-gradient (Gradyan)

CSS’de arka plan rengi olarak gradyanlar (degrade geçişler) kullanılabilir. Gradyanlar, renkler arasında yumuşak geçişler sağlar.

header {
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* Soldan sağa gradyan */
}

footer {
  background: radial-gradient(circle, #1e3c72, #2a5298); /* Dairesel gradyan */
}

Sonuç

CSS arka plan özellikleri, web sitelerinin tasarımında esneklik ve yaratıcılık sağlar.