---
title: 'Arka Planlar'
source: 'https://academia.sh/tr/kurslar/css-temelleri/arka-planlar'
course: 'CSS ile Görsel Sunum'
language: tr
updated: '2026-08-17T18:09:18+00:00'
license: 'CC BY-SA 4.0'
---

# Arka Planlar

Arka plan katmanları, yüzdeli konumlandırmanın hesabı, yineleme kipleri ile cover ve contain ölçeklemesinin sayısal karşılığı.

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 **hizalama**dı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$$

```js
// 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.

```css
/* 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.