Arka Planlar

Metin kararları tamamlandı. Kutuların arkasına henüz bakılmadı. Kutu modeli dersinde arka planın kenarlık kutusuna kadar uzandığı ve iç boşluğu kapsadığı kurulmuştu; arka planın kendisinin ne olabileceği söylenmedi.

Bir arka plan yalnızca bir renk değildir. Konumlandırılabilir, yinelenebilir, ölçeklenebilir görsellerden oluşan bir katman yığını olabilir. Bu ders o katmanların kurallarını ve hesaplarını ele alır.

Arka Plan Bir Katman Yığınıdır

background bir kısayoldur ve sekiz açılımı ayarlar: -color, -image, -position, -size, -repeat, -origin, -clip, -attachment.

background-image virgülle ayrılmış birden çok değer alabilir. Her değer bir katman kurar ve katmanlar soldan sağa üstten alta sıralanır: listenin ilk üyesi en üstte çizilir.

background-color bir katman değildir; her zaman en altta, tek bir renk olarak çizilir. Bu yüzden virgülle çoğaltılamaz.

Diğer açılımlar da virgülle çoğaltılır ve katmanlarla sırayla eşleşir. Katman sayısı background-image listesinin uzunluğuyla belirlenir; kısa kalan listeler baştan tekrarlanır.

Yüzdeli Konum Bir Hizalamadır

background-position yüzde aldığında bu yüzde bir uzaklık değil, bir hizalamadır: görselin yüzde $p$ noktası, alanın yüzde $p$ noktasına denk getirilir. Sonuç:

$$x = (A_{\text{en}} - G_{\text{en}}) \cdot p$$

// arkaplan.mjs — background-position yuzdelerinin ve yinelemenin hesabi
// yuzde konumlandirma: gorselin %p noktasi, alanin %p noktasina denk gelir
function konum(alanEn, gorselEn, deger) {
  if (typeof deger === "number") return deger;                 // px
  const p = parseFloat(deger) / 100;
  return (alanEn - gorselEn) * p;
}

const ALAN = { en: 400, boy: 200 };
const GORSEL = { en: 120, boy: 60 };

console.log(`alan ${ALAN.en}x${ALAN.boy}, gorsel ${GORSEL.en}x${GORSEL.boy}`);
for (const [x, y] of [["0%","0%"], ["50%","50%"], ["100%","100%"], ["25%","75%"], [16, 16]]) {
  const cx = konum(ALAN.en, GORSEL.en, x);
  const cy = konum(ALAN.boy, GORSEL.boy, y);
  console.log(`position: ${String(x).padEnd(5)} ${String(y).padEnd(5)} -> sol ust kose (${cx}, ${cy})`);
}

console.log("\n--- repeat: dosemenin baslangic noktalari ---");
function dosemeler(alan, gorsel, baslangic, yineleme) {
  if (yineleme === "no-repeat") return [baslangic];
  const noktalar = [];
  let x = baslangic;
  while (x > -gorsel) x -= gorsel;   // sola dogru geri sar
  x += gorsel;
  while (x < alan) { noktalar.push(x); x += gorsel; }
  return noktalar;
}
for (const y of ["repeat", "no-repeat"]) {
  const n = dosemeler(ALAN.en, GORSEL.en, konum(ALAN.en, GORSEL.en, "50%"), y);
  console.log(`${y.padEnd(10)} -> ${n.length} dosem, x = ${n.join(", ")}`);
}

console.log("\n--- repeat: yatay kalan bosluk ---");
for (const alanEn of [400, 360, 480]) {
  const tam = Math.floor(alanEn / GORSEL.en);
  const kalan = alanEn - tam * GORSEL.en;
  const roundOlcek = alanEn / Math.round(alanEn / GORSEL.en);
  console.log(`alan=${alanEn}: repeat -> ${tam} tam + ${kalan}px kirpik | round -> ${Math.round(alanEn / GORSEL.en)} adet, her biri ${roundOlcek.toFixed(2)}px | space -> ${tam} adet, aralarinda ${tam > 1 ? (kalan / (tam - 1)).toFixed(2) : 0}px`);
}

console.log("\n--- background-size: cover ve contain ---");
function olcekle({ alanEn, alanBoy, gorselEn, gorselBoy }, kip) {
  const ox = alanEn / gorselEn, oy = alanBoy / gorselBoy;
  const o = kip === "cover" ? Math.max(ox, oy) : Math.min(ox, oy);
  return { en: +(gorselEn * o).toFixed(1), boy: +(gorselBoy * o).toFixed(1), olcek: +o.toFixed(3) };
}
const g = { alanEn: 400, alanBoy: 200, gorselEn: 800, gorselBoy: 600 };
for (const kip of ["cover", "contain"]) {
  const r = olcekle(g, kip);
  console.log(`${kip.padEnd(8)} olcek=${r.olcek} -> ${r.en}x${r.boy}  (alan ${g.alanEn}x${g.alanBoy})`);
}

alan 400x200, gorsel 120x60
position: 0%    0%    -> sol ust kose (0, 0)
position: 50%   50%   -> sol ust kose (140, 70)
position: 100%  100%  -> sol ust kose (280, 140)
position: 25%   75%   -> sol ust kose (70, 105)
position: 16    16    -> sol ust kose (16, 16)

--- repeat: dosemenin baslangic noktalari ---
repeat     -> 5 dosem, x = -100, 20, 140, 260, 380
no-repeat  -> 1 dosem, x = 140

--- repeat: yatay kalan bosluk ---
alan=400: repeat -> 3 tam + 40px kirpik | round -> 3 adet, her biri 133.33px | space -> 3 adet, aralarinda 20.00px
alan=360: repeat -> 3 tam + 0px kirpik | round -> 3 adet, her biri 120.00px | space -> 3 adet, aralarinda 0.00px
alan=480: repeat -> 4 tam + 0px kirpik | round -> 4 adet, her biri 120.00px | space -> 4 adet, aralarinda 0.00px

--- background-size: cover ve contain ---
cover    olcek=0.5 -> 400x300  (alan 400x200)
contain  olcek=0.333 -> 266.7x200  (alan 400x200)

İlk blokta 50% 50% değerinin 140 ve 70 vermesi hesabın doğrudan sonucudur: alan ile görsel arasındaki farkın yarısı. Sonuç, görselin ortalanmasıdır. 100% 100% sağ alt köşeye yaslar, 0% 0% sol üst köşeye.

Piksel değerlerinin farkı son satırda görülüyor: 16px 16px her zaman kenardan 16 birim uzaklıktır, alan ve görsel ölçülerinden bağımsız. Yüzde bir hizalama, uzunluk bir uzaklık bildirir.

background-position dört değerli bir yazımı da kabul eder ve hangi kenardan ölçüleceğini seçtirir: right 16px bottom 16px yazımı sağ alt köşeden 16 birim içeri koyar.

Yineleme Kipleri

İkinci blok, repeat kipinde döşemenin görünen alanın dışından başladığını gösteriyor: ilk döşem $-100$ noktasında. Yineleme, konumlandırılan döşemin iki yönde de sonsuza uzatılması olarak tanımlıdır; görünen alanın dışına düşenler kırpılır.

Üçüncü blok üç kipin farkını sayıyla veriyor. 400 birimlik bir alanda 120 birimlik görsel:

• repeat — 3 tam döşem yerleşir, 40 birimlik bir kalan kırpık olarak görünür.
• round — döşem sayısı yuvarlanır ve görsel ölçeklenir: 3 adet, her biri 133,33 birim. Kırpık kalmaz, ama görselin oranı bozulur.
• space — döşem sayısı aşağı yuvarlanır ve kalan alan aralara dağıtılır: 3 adet, aralarında 20’şer birim. Ölçek korunur, aralık açılır.

Alan görselin tam katı olduğunda (360 ve 480 satırları) üç kip de aynı sonucu verir.

repeat-x ve repeat-y yalnızca bir eksende yineler; no-repeat hiç yinelemez.

cover ve contain

Son blok iki ölçekleme anahtar sözcüğünü karşılaştırıyor. 400×200 alanda 800×600 bir görsel:

cover — iki eksendeki ölçek oranından büyüğünü seçer. Sonuç 400×300: görsel alanı tam doldurur, taşan kısım kırpılır.

contain — küçüğünü seçer. Sonuç 266,7×200: görselin tamamı görünür, alanın bir kısmı boş kalır.

Karar şu soruyla verilir: kırpılması mı, boşluk kalması mı kabul edilebilir? Dekoratif bir görselde cover, tamamı görülmesi gereken bir görselde contain yazılır.

cover kullanılırken kırpmanın nereden yapılacağı background-position ile yönlendirilir; görselin önemli kısmı kenardaysa ortalama kırpma onu keser.

Arka Planın Sınırları

Üç özellik arka planın hangi bölgeye ilişkin olduğunu belirler ve kutu modeli dersindeki bölge adları burada değer olarak geçer.

background-origin — konumlandırmanın hangi kutuya göre yapılacağını seçer. Başlangıç değeri padding-box’tır.

background-clip — arka planın nereye kadar çizileceğini seçer. Başlangıç değeri border-box’tır; bu yüzden kesikli bir kenarlığın boşluklarından arka plan görünür. content-box yazıldığında arka plan iç boşluğa girmez.

background-attachment — arka planın kutuyla birlikte mi kaydırılacağını (scroll, local) yoksa görüntü alanına mı sabitleneceğini (fixed) seçer.

Görsel Arka Planlar ve Erişilebilirlik

Bir arka plan görseli belgede yoktur: alternatif metni yoktur, yardımcı teknolojiye bildirilmez, arama motoru tarafından içerik olarak okunmaz. Bu, sözde elemanlarla üretilen içeriğin sınırıyla aynı sınırdır.

Sonuç bir kuraldır: anlam taşıyan hiçbir görsel arka plan olarak konmaz. Konum haritası belgede img ögesiyle ve alternatif metniyle durmalıdır. Arka plan, dekoratif dokular ve üzerine metin yazılacak zeminler içindir.

Zemin görselinin üzerine yazılan metnin okunabilirliği ayrıca güvenceye alınmalıdır. Görsel inmediğinde ya da inmesi geciktiğinde metin arka plan rengiyle karşı karşıya kalır; o renk ile metin rengi arasındaki kontrast, önceki derste hesaplanan ölçütü geçmelidir.

/* istasyon.css — 21. adım: arka plan katmanları */
.kunye {
  background-color: var(--zemin);
  background-image: url("/gorsel/topografya.svg");
  background-position: right -40px top 50%;
  background-repeat: no-repeat;
  background-size: 320px auto;
}

.olcum-cizelgesi tbody tr:nth-child(odd) {
  background-color: hsl(var(--ton) 18% 97%);
  background-clip: padding-box;
}

.uyari-kutusu {
  background-color: hsl(0 66% 97%);
  background-image: url("/gorsel/uyari.svg");
  background-position: 12px center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding-inline-start: 44px;
}

Künyedeki desen dekoratiftir ve background-color ile birlikte yazılmıştır: görsel inmediğinde zemin rengi kalır ve başlık metninin kontrastı korunur.

.uyari-kutusu sınıfındaki simge de dekoratiftir; uyarının kendisi kutunun içindeki metinde yazılıdır. Simge yalnızca metnin görsel işaretidir ve padding-inline-start ile ona yer açılmıştır — simgenin metnin üzerine binmemesi bu bildirime bağlıdır.

Özet

• background-image virgülle çoğaltılarak katman yığını kurar; listenin ilk üyesi en üstte çizilir ve background-color her zaman en altta, tek renk olarak kalır.
• Yüzdeli arka plan konumu bir uzaklık değil hizalamadır: görselin yüzde $p$ noktası alanın yüzde $p$ noktasına denk getirilir; 50% bu yüzden ortalar.
• Yineleme kipleri kalan boşluğu farklı ele alır: repeat kırpar, round görseli ölçekleyerek kırpığı kaldırır, space kalanı döşemler arasına dağıtır.
• cover iki ölçek oranından büyüğünü seçer ve alanı doldurup taşanı kırpar; contain küçüğünü seçer ve görselin tamamını gösterip boşluk bırakır.
• Arka plan görseli belgede yoktur ve yardımcı teknolojiye bildirilmez; anlam taşıyan görseller işaretlemede, arka planlar yalnızca dekoratif katman olarak yazılır.

Sonraki Adım

Arka plan katmanları bir dosyadan gelen görsellerle kuruldu. Bir katman dosyasız da üretilebilir: renkler arasında hesaplanmış geçişlerle. Sonraki ders doğrusal ve dairesel geçişleri, renk durak noktalarının hesabını ve geçişlerin neden görsel değil arka plan görseli sayıldığını ele alır.