Çalıştırılabilir CSS Dokümanları: Arka plan resmi

Q: CSS'te arka plan resmi nasıl eklenir?

Elemente background-image: url("photo.jpg"); ver. Yol, CSS dosyasına göre (bir style özniteliği ya da elementi için sayfaya göre) görelidir. Elemente bir boyut ver, çünkü bir arka plan boş bir elementi asla büyütmez.

Q: Arka plan resmi bütün elementi nasıl kaplar?

background-position: center; ile birlikte background-size: cover; kullan. Resim oranlarını koruyarak kutuyu tamamen dolduracak şekilde ölçeklenir ve taşan kısım kırpılır.

Q: cover ile contain arasındaki fark nedir?

cover bütün kutuyu doldurur ve sığmayanı kırpar. contain bütün resmi gösterir ve oranlar farklı olduğunda iki tarafta boş alan bırakır.

Q: Arka plan resminin tekrar etmesi nasıl engellenir?

background-repeat: no-repeat; ekle. Varsayılan olarak bir arka plan resmi, elementi doldurmak için iki yönde de döşenir.

Q: Arka plan resmim neden görünmüyor?

Olağan nedenler url() içindeki yanlış bir yol (CSS dosyasına göre görelidir), içeriği olmadığı için yüksekliği olmayan bir element ya da resmi sıfırlayan daha sonraki bir background kısa yazımıdır.

Arka plan resmi nasıl eklenir

background-image, elementin içeriğinin, padding'inin ve kenarlığının arkasına bir resim boyar. Varsayılan olarak padding kutusunun sol üst köşesinden başlar, doğal boyutunu korur ve kutuyu doldurmak için tekrar eder:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background image</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dots {
      /* a 24x24 image: one blue dot */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      height: 120px;
      padding: 16px;
      border: 2px solid #111827;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="dots">One 24px image, repeated to fill the box</div>
</body>
</html>

Gerçek bir projede url() bir dosyayı gösterir: url("images/hero.jpg"). Yol, onu içeren stil dosyasına göre (bir <style> elementi için sayfaya göre) görelidir. Bu sayfadaki örnekler her yerde çalışsın diye data: URL'leri olarak satır içi yazılmış küçük SVG resimler kullanıyor.

Baştan bilmen gereken iki şey:

Arka plan bir elemente boyut vermez. Arka plan resmi olan boş bir div 0px yüksekliğindedir. Ona içerik, padding, bir height ya da bir aspect-ratio ver.
Arka plan resmi süslemedir. Ekran okuyucular onu atlar ve alt metni yoktur. Anlam taşıyan bir resmin yeri bir <img> elementidir.

background-size: cover, contain ve uzunluklar

background-size resmi ölçekler. İki anahtar kelime oranlarını korur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cover vs contain</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      width: 160px; height: 160px;
      background: var(--landscape) center / auto no-repeat, #e5e7eb;
      border: 2px solid #111827;
    }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .stretch { background-size: 100% 100%; }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box"></div>auto (400x200, cropped)</div>
    <div><div class="box cover"></div>cover</div>
    <div><div class="box contain"></div>contain</div>
    <div><div class="box stretch"></div>100% 100% (distorted)</div>
  </div>
</body>
</html>

Resim yüksekliğinin iki katı genişliğinde ve her kutu kare.

Değer	Sonuç
`auto` (varsayılan)	Resmin kendi boyutu
`cover`	Kutu tamamen dolana kadar ölçeklenir; fazlası kırpılır
`contain`	Resmin tamamı sığana kadar ölçeklenir; iki tarafta gri şeritler kalır
`200px`	200px genişlik, yükseklik orantılı
`50% auto`	Kutunun genişliğinin yarısı, yükseklik orantılı
`100% 100%`	Tam olarak kutunun boyutu; oranlar farklıysa resmi bozar

Hero bannerlar ve kartlar için olağan seçim cover'dır. contain ise asla kesilmemesi gereken logolar ve çizimler içindir.

background-position ve background-repeat

background-position resmi kutunun içine anahtar kelimelerle (top, center, bottom, left, right), yüzdelerle ya da uzunluklarla yerleştirir. background-repeat döşemeyi kontrol eder. Birkaç değer dene:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Position and repeat</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      height: 140px; margin-top: 10px;
      border: 2px solid #111827;
      background-color: #f3f4f6;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      background-size: 48px;
    }
    label { display: block; margin-top: 6px; }
  </style>
</head>
<body>
  <label>background-position: <input id="pos" value="center" size="18"></label>
  <label>background-repeat: <input id="rep" value="no-repeat" size="18"></label>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    const pos = document.getElementById('pos');
    const rep = document.getElementById('rep');
    const show = () => {
      box.style.backgroundPosition = pos.value;
      box.style.backgroundRepeat = rep.value;
    };
    pos.addEventListener('input', show);
    rep.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Konum olarak top right, bottom 10px right 20px ve 25% 75%, tekrar değeri olarak repeat-x, repeat-y, space (hiçbiri kesilmesin diye aralıklı döşer) ve round (tam sayıda sığsın diye yeniden boyutlandırılmış döşer) dene.

Katmanlar: birden fazla arka plan ve metin katmanı

background-image virgülle ayrılmış bir liste alır. İlk katman en üste çizilir. Yaygın kullanım, beyaz metin okunaklı kalsın diye bir fotoğrafın üzerine yarı saydam bir gradyandır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overlay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      background-image:
        linear-gradient(rgb(17 24 39 / 10%), rgb(17 24 39 / 75%)),
        var(--landscape);
      background-size: cover;
      background-position: center;
      aspect-ratio: 16 / 7;
      display: flex; align-items: end;
      padding: 20px; box-sizing: border-box;
      color: white;
    }
    h1 { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <div class="hero" id="hero"><h1>Readable over an image</h1></div>
</body>
</html>

aspect-ratio boş kutuya bir yükseklik verir ve background-size: cover iki katmana da uygulanır. Daha fazla gradyan tarifi için CSS gradyanlar sayfasına bak.

background kısa yazımı

background bütün arka plan özelliklerini tek satırda ayarlar. Boyut, konumdan hemen sonra eğik çizgiyle ayrılarak gelmelidir ve renk son katmana yazılır:

.hero {
  background: url("hero.jpg") center / cover no-repeat, #1f2937;
}
/* the same as */
.hero {
  background-image: url("hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1f2937;
}

Yedek renk, resim yüklenirken ve yüklenemezse görünür. Kısa yazıma dahil etmediğin her özellik varsayılanına sıfırlanır, bu yüzden kısa yazımı önce, tekil özellikleri ondan sonra yaz.

Diğer arka plan özellikleri

Özellik	Ne yapar
`background-attachment: fixed`	Sayfa kayarken resim yerinde kalır (iOS Safari'de yok sayılır)
`background-origin`	Konumun kenarlık, padding ya da içerik kenarından başlayıp başlamadığı
`background-clip`	Arka planın nereye boyandığı, harfleri doldurmak için `text` dahil
`background-blend-mode`	Katmanları `multiply` gibi modlarla karıştırır

Sık yapılan hatalar

Yanlış bir yol. Bir stil dosyasındaki url(), HTML sayfasına değil CSS dosyasına göre görelidir.
Boş bir element. Yüksekliği yoktur, bu yüzden resmin görüneceği bir yer yoktur.
no-repeat'i unutmak, contain ya da küçük bir resimle: resim döşenir.
cover'ı kastederken 100% 100% ile germek.
Önemli resimleri arka plan yapmak. İçerik için alt metinli <img> kullan; arka planlar ekran okuyuculara görünmez.
Boşluk ya da tırnak içeren bir data: URL'inin etrafında tırnak eksikliği. Her zaman url("...") yaz.

Sıkça Sorulan Sorular

CSS'te arka plan resmi nasıl eklenir?

Elemente background-image: url("photo.jpg"); ver. Yol, CSS dosyasına göre (bir style özniteliği ya da <style> elementi için sayfaya göre) görelidir. Elemente bir boyut ver, çünkü bir arka plan boş bir elementi asla büyütmez.

Arka plan resmi bütün elementi nasıl kaplar?

background-position: center; ile birlikte background-size: cover; kullan. Resim oranlarını koruyarak kutuyu tamamen dolduracak şekilde ölçeklenir ve taşan kısım kırpılır.

cover ile contain arasındaki fark nedir?

cover bütün kutuyu doldurur ve sığmayanı kırpar. contain bütün resmi gösterir ve oranlar farklı olduğunda iki tarafta boş alan bırakır.

Arka plan resminin tekrar etmesi nasıl engellenir?

background-repeat: no-repeat; ekle. Varsayılan olarak bir arka plan resmi, elementi doldurmak için iki yönde de döşenir.

Arka plan resmim neden görünmüyor?

Olağan nedenler url() içindeki yanlış bir yol (CSS dosyasına göre görelidir), içeriği olmadığı için yüksekliği olmayan bir element ya da resmi sıfırlayan daha sonraki bir background kısa yazımıdır.

İlgili kavramlar