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