CSS Background Özellikleri: Renk, Görsel, Boyut ve Konum

Arka plan katmanı neyin altında durur?

MDN'ye göre arka plan öğenin içeriğinin altında boyanır. Boyama sırası şöyledir: En altta background-color, onun üstünde arka plan görselleri, en üstte ise öğenin kenarlığı. Birden fazla görsel verdiğinizde listedeki ilk görsel kullanıcıya en yakın, yani en üstteki katmandır. Arka plan varsayılan olarak kenarlığın dış kenarına kadar uzanır ve kenarlığın altına da boyanır; bu davranış kesik çizgili ya da yarı saydam kenarlıklarda fark edilir. Kutunun katmanları için kutu modeli yazısına bakabilirsiniz.

Görsel yüklenemediğinde, örneğin dosya bulunamadığında ya da ağ bağlantısı kesildiğinde, tarayıcı o görseli none yazılmış gibi ele alır. MDN bu nedenle görseller opak olsa ve renk normalde görünmeyecek olsa bile her zaman bir background-color tanımlamanızı önerir; görsel gelmezse renk yedek görevi görür. Özellikle görselin üzerinde açık renkli metin varsa bu yedek, metnin okunabilir kalmasını sağlar.

.kahraman {
  background-color: #1e3a5f;
  /* görsel yüklenmezse koyu lacivert zemin kalır, beyaz metin okunur */
  background-image: url("kapak.jpg");
  color: white;
}

background-image: görseller ve gradyanlar

background-image ya none ya da virgülle ayrılmış bir <image> listesi alır. <image> türü url() ile verilen dosyaları ve linear-gradient() gibi gradyan fonksiyonlarını kapsar. Gradyanlar görsel türündendir, renk türünden değildir; bu yüzden background-color içine yazılamaz, yalnızca background-image ya da background içinde kullanılır.

Erişilebilirlik açısından MDN iki uyarı yapar. Tarayıcılar arka plan görselleri hakkında yardımcı teknolojilere bilgi vermez; ekran okuyucular bu görselleri duyurmaz. Sayfanın amacını anlamak için gerekli bir görsel varsa onu belgede anlamsal olarak, örneğin bir <img> öğesi ve alternatif metinle sunmak gerekir. İkincisi, görselin üzerindeki metinle görsel arasında yeterli kontrast olmalıdır. MDN, WCAG'ye göre gövde metninde 4.5:1, başlık gibi büyük metinlerde 3:1 oran gerektiğini hatırlatır.

background-size: cover, contain ve ölçüler

background-size görselin boyutunu belirler. Değer cover veya contain anahtar kelimesi, tek bir genişlik değeri (yükseklik auto olur) ya da önce genişlik sonra yükseklik olmak üzere iki değer olabilir. Her değer <length>, <percentage> veya auto olabilir; negatif değerler geçersizdir. Başlangıç değeri auto'dur.

Yüzde değerlerin neye göre hesaplandığı önemlidir. MDN'ye göre yüzde, arka plan konumlandırma alanına göredir; bu alanı background-origin belirler ve varsayılan değeri padding kutusudur. background-attachment: fixed verilmişse alan görüntü alanının (viewport) tamamıdır.

.afis {
  width: 400px;
  padding: 20px;
  border: 5px solid;
  background-image: url("desen.png");
  background-size: 50% auto;
  background-repeat: no-repeat;
}
/* box-sizing: content-box varsayılan
   padding kutusu genişliği: 400 + 20 + 20 = 440px
   görsel genişliği:        440 x 0,5 = 220px
   yükseklik auto: görselin kendi oranından hesaplanır
   kenarlığın 5px'i hesaba girmez */

Görselin doğal boyutları da sonucu etkiler. JPG gibi bir bitmap görselin her zaman doğal boyutu ve oranı vardır. SVG gibi bir vektör görselin doğal boyutu olmayabilir. Gradyanların ise hiç doğal boyutu ya da oranı yoktur, bu yüzden auto değerinde konumlandırma alanının boyutunda çizilirler. MDN, doğal boyutu ya da oranı olmayan vektör görsellerde boyutlandırmanın her tarayıcıda tam uygulanmadığını belirtir ve farklı tarayıcılarda test etmenizi önerir.

background-position ve yüzde hesabı

background-position her görselin başlangıç konumunu belirler ve konum background-origin ile seçilen kutuya göredir. Başlangıç değeri 0% 0%, yani sol üst köşedir. Değer bir ile dört parça alabilir:

• Tek değer: center ortalar. top, left, bottom veya right görseli o kenara yaslar ve diğer ekseni yüzde 50 yapar. Tek bir uzunluk ya da yüzde X koordinatını verir, Y yüzde 50 olur.
• İki değer: Biri X, diğeri Y'yi belirler. İki anahtar kelimenin sırası önemsizdir; top left ile left top aynıdır. Uzunluk ile anahtar kelime eşleştirildiğinde ise sıra önemlidir: right 20px geçerlidir, 20px right geçersizdir. top top ve left right gibi aynı eksende iki anahtar kelime de geçersizdir.
• Üç ya da dört değer: Uzunluk ve yüzdeler kendinden önceki anahtar kelimeye göre öteleme olur. bottom 10px right 20px görseli alttan 10, sağdan 20 piksel içeride konumlar.

Yüzde değerler sezgiye aykırı çalışabilir. MDN'nin açıklamasına göre yüzde, kapsayıcının değil kapsayıcı ile görsel arasındaki farkın yüzdesidir. Formül şudur: (kapsayıcı genişliği - görsel genişliği) x yüzde = soldan öteleme. Böylece yüzde 0 görselin sol kenarını kapsayıcının sol kenarına, yüzde 100 görselin sağ kenarını kapsayıcının sağ kenarına hizalar ve yüzde 50 görseli tam ortalar.

.kucuk-pencere {
  width: 100px;
  background-image: url("genis.png");
  /* görsel 300px genişliğinde, background-size: auto */
  background-position: 50% 0;
}
/* fark: 100 - 300 = -200px
   yüzde 50: -200 x 0,5 = -100px
   görselin sol kenarı kapsayıcının 100px soluna kayar,
   görselin ortadaki 100px'lik bölümü görünür */

.tam-genislik {
  background-size: 100% auto;
  background-position: 30% 0;
  /* görsel kapsayıcıyla aynı genişlikte: fark 0,
     yatay yüzde konumun etkisi olmaz */
}

İkinci kural MDN'nin özellikle uyardığı durumdur: background-size bir eksende kapsayıcıyla eşitse o eksende fark sıfırdır ve yüzde konum hiçbir şey değiştirmez. Görseli kaydırmak istiyorsanız o eksende piksel gibi mutlak bir değer kullanmanız gerekir.

background-repeat: repeat, space, round ve no-repeat

background-repeat bir veya iki anahtar kelime alır; iki değer verilirse ilki yatay, ikincisi dikey tekrarı belirler. Varsayılan repeat repeat'tir: Görsel oranını koruyarak iki yönde de alanı dolduracak kadar tekrarlanır ve kenardaki kopyalar kırpılır. repeat-x, repeat no-repeat anlamına gelir ve yalnızca yatayda tekrarlar; repeat-y ise no-repeat repeat anlamına gelir.

• no-repeat: Görsel bir kez çizilir; yerini background-position belirler.
• space: Görsel kırpılmadan sığabildiği kadar tekrarlanır; ilk ve son kopya kenarlara yaslanır, aradaki boşluk eşit dağıtılır. Yalnızca bir kopya sığıyorsa background-position dikkate alınır.
• round: Kopyalar boşluk bırakmadan gerilir; alan büyüdükçe bir kopya daha sığacak yer açılana kadar uzarlar. MDN'ye göre görselin oranını bozabilen tek tekrar değeri budur.

.serit {
  background-image: url("yildiz.png");
  background-repeat: repeat-x;
  /* yalnızca yatayda tekrar, kenardaki kopya kırpılabilir */
}

.dosemeli {
  background-image: url("karo.png");
  background-repeat: space round;
  /* yatayda eşit aralıklı, dikeyde gerilerek tam doldurur */
}

background-origin ve background-clip

Bu iki özellik birbirine çok benzer ama farklı iş yapar. background-origin görselin nereye göre konumlandırılacağını belirler: border-box, padding-box (varsayılan) veya content-box. background-clip ise arka planın nereye kadar boyanacağını belirler: border-box (varsayılan) kenarlığın dış kenarına kadar, padding-box kenarlığın altını boyamadan padding kenarına kadar, content-box yalnızca içerik alanına boyar.

background-clip iki ilginç değer daha alır. text arka planı yalnızca metnin harflerinin içine boyar; MDN'nin örneğinde bunun görünmesi için metin rengi büyük ölçüde saydam yapılır, çünkü opak metin arka planı örter. border-area ise arka planı yalnızca kenarlığın boyadığı alana kırpar. Kök öğenin arka plan boyama alanı farklı olduğu için background-clip <html> üzerinde etkisizdir.

.gradyan-yazi {
  background: linear-gradient(60deg, red, yellow, red);
  background-clip: text;
  color: rgb(0 0 0 / 20%);
  /* gradyan harflerin içinden görünür */
  font: 900 2em sans-serif;
}

.icerik-konumlu {
  padding: 24px;
  background-image: url("logo.png");
  background-repeat: no-repeat;
  background-origin: content-box;
  /* görsel padding'in içinden, içerik köşesinden başlar */
}

Tarayıcı desteği için MDN sayfasındaki uyumluluk tablosuna bakın; özellikle text ve border-area değerlerini kullanmadan önce kontrol etmeniz ve desteklenmediği durumda metnin okunabilir kaldığından emin olmanız gerekir.

background-attachment: scroll, fixed ve local

Bu özellik arka planın kaydırmaya nasıl tepki vereceğini belirler. scroll (varsayılan) arka planı öğenin kendisine sabitler; öğenin içeriği kaydırılsa bile arka plan onunla kaymaz, adeta kenarlığa yapışıktır. local arka planı öğenin içeriğine bağlar; kaydırılabilir bir kutuda arka plan içerikle birlikte kayar. fixed ise arka planı görüntü alanına sabitler; sayfa ya da öğe kaydırılsa bile arka plan yerinde kalır. MDN, fixed verildiğinde background-origin özelliğinin yok sayıldığını not eder. Kaydırılabilir kutuların kendisi overflow yazısında anlatılıyor.

background kısayolu ve değer sırası

background bir veya daha fazla katmanı virgülle ayırarak alır. Her katmanda görsel, konum, boyut, tekrar, ekleme biçimi ve en fazla iki kutu değeri bulunabilir; renk ise yalnızca son katmana yazılabilir. Kısayolda yazmadığınız her bileşen başlangıç değerine döner. Bu, kısayolun önceden yazılmış ayrı özellikleri sıfırlayabileceği anlamına gelir. Ayrıca kısayol background-blend-mode özelliğini de, kendisi ayarlayamadığı hâlde, başlangıç değerine döndürür.

Değerlerin çoğu herhangi bir sırada yazılabilir, ama iki kural kesindir. Birincisi, boyut yalnızca konumun hemen ardından, araya / konarak yazılabilir: center / cover. İkincisi, kutu değerleri için tek değer yazılırsa hem background-origin hem background-clip o değeri alır; iki değer yazılırsa ilki origin, ikincisi clip olur. MDN okunabilirlik için şu sırayı önerir: görsel, konum / boyut, tekrar, ekleme, clip, origin, renk.

.kapak {
  background: url("kapak.jpg") center / cover no-repeat #1e3a5f;
  /* görsel ortalanır, alanı kaplar, tekrar etmez; yedek renk lacivert */
}

.yanlis {
  background: url("kapak.jpg") cover center no-repeat;
  /* geçersiz: boyut konumdan sonra ve / ile gelmeli, bildirim yok sayılır */
}

.sifirlama-tuzagi {
  background-size: cover;
  background: url("kapak.jpg") no-repeat;
  /* kısayol background-size değerini auto'ya döndürür, cover kaybolur */
}

Son örnek sık yaşanan bir hatadır. Ayrı özelliği kısayoldan önce yazdığınızda kısayol onu sessizce sıfırlar. Ya ayrı özelliği kısayoldan sonra yazın ya da değeri kısayolun içine ekleyin. Kısayol özelliklerin cascade ile ilişkisi cascade ve kalıtım yazısında anlatılıyor.

Çoklu arka planlar

Birden fazla arka plan virgülle ayrılmış bir liste olarak verilir. İlk öğe en üstteki, son öğe en alttaki katmandır ve yalnızca son katman renk içerebilir. Bu liste sözdizimi background-color dışındaki bütün ayrı özelliklerde de geçerlidir. Her ayrı özelliğin listesindeki n'inci değer n'inci katmana uygulanır. Bir özellik katman sayısından az değer alırsa tarayıcı listeyi yeterli sayıya ulaşana kadar tekrarlar.

.cok-katmanli {
  background-image:
    url("logo.png"),
    url("baloncuk.png"),
    linear-gradient(to right, rgb(30 75 115 / 100%), transparent);
  background-repeat: no-repeat;
  /* tek değer: üç katmana da no-repeat uygulanır */
  background-position:
    bottom right,
    left,
    right;
  /* logo sağ altta, baloncuk solda, gradyan sağda */
}

Bu örnekte logo en üstte, baloncuk görseli ortada, gradyan en alttadır. Üstteki katmanda saydam alan yoksa alttaki katmanlar hiç görünmez; çoklu arka planın anlamlı olması için üst katmanların saydam bölgeleri olmalıdır. Gradyanlar saydamlığı desteklediği için bir fotoğrafın üzerine yarı saydam bir renk geçişi koymak tipik bir kullanımdır.

body arka planı neden bütün sayfayı kaplar?

MDN bu davranışı açıkça açıklar: Kök öğenin (<html>) hesaplanmış background-image değeri none ve background-color değeri transparent ise tarayıcı <body> öğesinin arka plan stillerini köke taşır ve body üzerinde background: initial yazılmış gibi davranır. Bu yüzden body kısa olsa bile rengi bütün pencereyi doldurur. Belirtimi yazanlar da sayfa arka planını html yerine body kuralında tanımlamayı önerir. Bir istisna var: html ya da body üzerinde contain özelliği none dışında bir değer alırsa bu aktarım gerçekleşmez.

Sık yapılan hatalar

• Gradyanı background-color içine yazmak: Gradyan bir görseldir; background-image veya background kullanın.
• contain ile tekrarı unutmak: Alan görselden büyükse görsel döşenir; no-repeat ekleyin.
• Kısayolda boyutu / olmadan yazmak: center cover geçersizdir, center / cover yazın.
• Kısayolla ayrı özellikleri ezmek: background yazmadığınız bileşenleri başlangıç değerine döndürür.
• Yedek rengi atlamak: Görsel yüklenmezse açık renkli metin beyaz zeminde kaybolabilir.
• Önemli bilgiyi arka plan görseline koymak: Ekran okuyucular arka plan görsellerini duyurmaz.

Sık Sorulan Sorular

cover mı contain mı kullanmalıyım?

Alanın boşluksuz dolması önemliyse cover kullanın; görselin bir kısmı kırpılabilir. Görselin tamamının görünmesi önemliyse contain kullanın; alanın bir kısmı boş kalabilir ve tekrarı kapatmak için no-repeat eklemeniz gerekir.

Arka plan görselini nasıl ortalarım?

background-position: center yazın; tek değer olduğunda diğer eksen de yüzde 50 olur ve görsel iki eksende ortalanır. Kısayolda background: url("x.png") center / contain no-repeat; biçimini kullanabilirsiniz.

Yalnızca arka planı saydam yapıp metni opak bırakabilir miyim?

Evet. opacity öğeyi içeriğiyle birlikte saydamlaştırır. Yalnızca zemini saydam yapmak için alpha kanallı bir renk kullanın, örneğin background-color: rgb(0 0 0 / 40%). Ayrıntılar renk değerleri yazısında.

background-clip ile background-origin arasındaki fark nedir?

background-origin görselin konumlandırılacağı başlangıç kutusunu, background-clip ise arka planın boyanacağı sınırı belirler. Varsayılan değerleri farklıdır: origin padding-box, clip border-box. Bu yüzden görsel varsayılan olarak padding köşesinden başlar ama kenarlığın altına kadar boyanabilir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · CSS gradyanları · CSS renk değerleri · Kutu modeli · border-radius ve box-shadow · filter ve backdrop-filter