Arka plan görseli

background-image ve ilgili özellikleri öğrenirsin.

background-image nedir?

background-image bir öğenin zeminine görsel koyar. En sık kullanılan biçim url() işlevidir: background-image: url("/images/hero.jpg").

Görsel dosya yolunu tırnak içinde yazmak iyi bir alışkanlıktır; boşluk içeren yollar için zorunludur. Varsayılan olarak görsel zeminin sol üst köşesinden başlar ve kutuyu doldurana kadar yatayda ve dikeyde yinelenir.

background-repeat

background-repeat görselin nasıl döşeneceğini belirler. Varsayılan repeat değeridir; görsel hem yatayda hem dikeyde yinelenir.

Sık kullanılan diğer değerler: no-repeat görseli bir kez gösterir; repeat-x yalnızca yatayda, repeat-y yalnızca dikeyde yineler. Bir rozet ikonu için genelde no-repeat istersin; bir doku için repeat.

background-position

background-position görselin zemin içindeki konumunu belirler. En yalın haliyle iki anahtar sözcük alır: center top, left center gibi.

Yüzde ya da piksel de verilebilir: 50% 0 görseli yatayda ortaya, dikeyde üste koyar. Bir kahraman bölümünde görselin odak noktasını üste veya ortaya hizalamak için sık kullanılır.

Uygulama .hero bölümüne görsel ekle

Bir .hero sınıf seçicisi ekle. background-image özelliğini url("/images/hero.jpg"), background-repeat özelliğini no-repeat, background-position özelliğini center top değeriyle ata.

Örnek çözümü göster

/* .hero bölümüne görsel ekle */
.hero {
  background-image: url("/images/hero.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

Kendini test et

Hangisi geçerli bir background-image değeridir?
- url("/images/hero.jpg")
- src="/images/hero.jpg"
- img("/images/hero.jpg")
- /images/hero.jpg
Cevabı göster

url("/images/hero.jpg") — Doğru. url() işlevi görsel yolunu tırnak içinde alır; background-image bunu ister.

İkonun bir kez görünmesi için tekrar değerini yaz

.icon {
  background-image: url("/images/check.png");
  background-repeat: ____;
}

Cevabı göster

.icon {
  background-image: url("/images/check.png");
  background-repeat: no-repeat;
}

Değeri anlamına eşle

no-repeat

Görsel bir kez gösterilir
repeat-x

Yalnızca yatayda yinelenir
center top

Üst-orta konuma hizalanır
url("/x.png")

Görsel yolu yüklenir

Sıradaki ders: Arka plan kısayolu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler