Yükleniyor...

CSS Arka Planlar

Metni renklendirebiliyorsunuz. Şimdi arkadaki yüzeyi boyayın. Arka planlar öğenin kutusunu doldurur — düz renkler, fotoğraflar ve sonra gradyanlar — harfler color ile üstte kalır.

CSS arka planı nedir?

Arka plan, öğenin içeriğinin arkasına boyanan katmandır (genelde padding alanının da arkasına). Bunu özellik ailesiyle kontrol edersiniz: background-color, background-image, background-repeat, background-size, background-position ve background kısayolu. Gradyanların ayrı dersi var — bugün düz dolgular ve görsel temelleri.

Özellikler bir bakışta

Önce her birinin işini öğrenin. İlk gün tüm anahtar sözcükler gerekmez.

📊 Günlük CSS arka plan özellikleri

Özellik İş Günlük başlangıç
background-color İçeriğin arkasında düz dolgu background-color: #f1f5f9;
background-image Görsel katmanı (sonra gradyan) background-image: url("hero.jpg");
background-repeat Döşemek veya durdurmak background-repeat: no-repeat;
background-size Görseli kutuda ölçeklemek background-size: cover;
background-position Görseli hizalamak background-position: center;
background Birkaç değeri birleştiren kısayol background: #0f172a url("a.jpg") center / cover no-repeat;

background-color ile düz dolgular

En basit arka plan düz bir renktir. Bildiğiniz her renk değeri — adlı, hex, rgb veya hsl — burada çalışır.

Düz kart arka planı

css
CSS Code 
.card {
background-color: #f1f5f9;
color: #0f172a;
padding: 1rem;
}

Metni okunur tutun

Harfler için color, kutu için background-color koyun. Açık dolgu daha koyu metin ister; koyu dolgu daha açık metin.

background-image ile görseller

url("…") ile bir dosyaya işaret edin. Yollar CSS dosyasına göredir (veya mutlak URL). Görsel içeriğin arkasındadır — HTML akışında <img> değildir.

Hero bloğunun arkasında fotoğraf

css
CSS Code 
.hero {
background-image: url("hero.jpg");
color: white;
min-height: 12rem;
padding: 2rem;
}

Görsel vs <img>

Fotoğraf içerikse (alt, anlam) <img> kullanın. UI veya bölümün arkasında süs ise background-image.

Döşemeyi durdurun: no-repeat + cover

Varsayılan olarak birçok tarayıcı küçük bir görseli döşer. Hero için döşemeyi kapatın ve cover ile ölçekleyin ki fotoğraf kutuyu doldursun.

Kutuyu dolduran hero görseli

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

cover bir cümlede

cover kutu dolana kadar ölçekler — kenarlar kırpılabilir. contain tüm görseli sığdırır — boş şeritler görebilirsiniz.

Odak noktasını hedefleyin

background-position fotoğrafın hangi bölümünün görünür kalacağını söyler — cover yüzleri veya logoları kestiğinde işe yarar.

Fotoğrafı hedefle

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}

Kısayol (okunur kalsın)

background içinde değerleri birleştirebilirsiniz. Öğrenirken ayrı yazın; sıra tanıdık olunca kısayola geçin.

Kompakt background kısayolu

css
CSS Code 
.banner {
background: #0f172a url("banner.jpg") center / cover no-repeat;
color: #f8fafc;
padding: 2rem;
}

Sıra ipucu

Yaygın kalıp: renk, görsel, position / size, repeat. Kısayol karıştırırsa tekrar ayırın — ikisi de geçerlidir.

Kendiniz deneyin

  1. .card ile background-color: #f1f5f9 ve koyu color metin.
  2. .hero ile background-image: url("…"), min-height ve açık metin.
  3. background-repeat: no-repeat, background-size: cover, background-position: center.
  4. Position’ı left center veya right center yapın — karede ne kalır bakın.
  5. İsteğe bağlı: hero’yu background kısayoluyla yeniden yazın, url() öncesi yedek renk koyun.

Sık hatalar

  • Kutuyu doldurmak için color — yalnızca harfleri boyar
  • no-repeat unutup logonun bölümü döşemesi
  • Bozuk url("…") yolları (yanlış klasör veya tırnak yok)
  • Sıkıştırılmamış kocaman fotoğraflar arka plan — yavaş sayfalar
  • Düz renk + bir görsel oturmadan karmaşık gradyana atlamak (gradyanlar sonra)

Özet

  • Arka planlar içeriğin arkasına boyar; color metni boyar
  • Düz dolgu için background-color; fotoğraf için background-image
  • Fotoğrafları no-repeat, cover/contain ve position ile kontrol edin
  • Kısayol isteğe bağlı — öğrenirken netlik zekâdan üstündür
  • Tam gradyan tarifleri sonraki derste
  • Gri bir kart ve fotoğraflı bir hero pratik edin ta ki özellik adları yerleşsin

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders