CSS'te bir öğeye arka plan resmi eklemek için background-image kullanılır. Boyut ve konumu da ayarlayabilirsin.

Temel kullanım

Resim yolunu url() içinde ver.

.kapak {
  background-image: url('manzara.jpg');
  background-size: cover;
  background-position: center;
}

Renk + resim birlikte

Resim yüklenene kadar bir arka plan rengi göster.

.kapak {
  background: #1a1a2e url('manzara.jpg') center/cover;
}

İpuçları

  • background-size: cover resmi alanı kaplayacak şekilde büyütür.
  • Metin okunmuyorsa üstüne yarı saydam bir katman ekle.
  • Büyük resimler sayfayı yavaşlatır; boyutu optimize et.

CSS derslerimizle tasarımı pekiştir.