Arka Plan Görüntüsü Ayarlamak için CSS Kullanma

• Mayıs Ayı 17, 2024

Web sitelerinin metnin arkasında duran bu güzel tasarımları ve resimleri nasıl yönettiğini hiç merak ettiniz mi? Her şey Basamaklı Stil Sayfalarının büyüsü ile yapılır. CSS, yalnızca sayfanızın arka planı için bir resim belirlemenize izin vermekle kalmaz, aynı zamanda görüntünün nasıl görüntülendiğini değiştirmenize olanak tanır - böylece yalnızca istediğiniz görünümü elde edebilirsiniz.

Arka plan resminiz için temel yapı taşı, uygun şekilde 'arka plan resmi' özelliğidir. Bu özelliği, sitenize aşağıdaki gibi görüntü dosyasının bulunduğu yeri belirtmek için kullanırsınız:

vücut {
arka plan resmi: url ("image.gif");
}

Web sayfanız için bir arka plan resmi yerleştirmek için tek yapmanız gereken budur. Tabii ki, muhtemelen görüntünün görünüşünü özelleştirmek isteyeceksiniz. Resminizin sayfanın üstünden başlamasını, ancak sola hizalanmış (varsayılan hizalama) yerine yatay olarak ortalanmasını istediğinizi varsayalım. Bu durumda, 'arka plan konumu' özelliğini CSS kuralınıza eklemek istersiniz:

vücut {
arka plan resmi: url ("image.gif");
arka plan konumu: orta üst;
}

'Arka plan konumu' özelliğini tanımlarken, ilk değer yatay hizalamayı (sol, orta veya sağ) ve ikinci değer görüntünün dikey hizalamasını (üst, orta veya alt) ayarlar.

Ardından, dikey olarak döşemesini isteseniz de, görüntünün yatay olarak döşenmesini (kendini yinelemesini) durdurmak istediğinize karar verirsiniz. 'Background-repeat' özelliğini arka planına çıkarma zamanı:

vücut {
arka plan resmi: url ("image.gif");
arka plan konumu: orta üst;
arkaplan tekrarlama: repeat-y;
}

Değerin 'repeat-y' olarak ayarlanması, tarayıcıya arka plan resmini y ekseni boyunca dikey olarak döşemesini söyler, ancak x eksenini (yatay olarak) tam olarak istediğimiz şeydir. Yatay olarak döşemek isterseniz dikey olarak döşemek isterseniz bunun yerine 'repeat-x' değerini kullanırsınız; görüntünün döşenmesini hiç istemediyseniz, ona 'tekrarlama' değeri verin. Varsayılan değer, görüntüyü hem yatay hem de dikey olarak döşemektir, bu nedenle görüntünüz için en iyi seçimse, 'arka plan tekrarlama' özelliğini ayarlamanız gerekmez.

Son olarak, 'arka plan eki' özelliğine göz atabilirsiniz. Varsayılan olarak, sayfa ilerledikçe görüntünüz kayar, bu nedenle görüntüyü dikey olarak tekrarlamıyorsanız ve uzun bir sayfanız varsa görüntünüz sayfanın altına doğru genişlemez. Bunu, 'arka plan eki' özelliğini 'sabit' olarak ayarlayarak değiştirebilirsiniz; bu, arka plan görüntüsünün sayfanın nasıl kaydırıldığından bağımsız olarak monitörde aynı noktada kalmasına neden olur. Şimdi arka plan resmi kurallarınız şöyle görünecek:

vücut {
arka plan resmi: url ("image.gif");
arka plan konumu: orta üst;
arkaplan tekrarlama: repeat-y;
arka plan eki: sabit;
}


CSS kurallarınızı mümkün olduğunca küçük tutmak istiyorsanız, aşağıdaki gibi 'background' özelliğini kullanarak tüm arka plan değerlerinizi tek bir satırda birleştirebilirsiniz:

arka fon {
url ("image.gif") tekrar-y sabit orta üst;
}

'Background' özelliğini kullanırken değerleri belirli bir sırada listelemeniz gerekir:
[arka plan rengi (kullanılıyorsa)] [arka plan görüntüsü] [arka plan tekrarı] [arka plan eki] [arka plan konumu]. İhtiyacınız olmayan herhangi bir değeri dışarıda bırakabilirsiniz, sadece doğru sırada kullandığınız değerleri listelemeniz gerekir, aksi takdirde kural çalışmaz.

Video Talimatları: Html5 ve CSS3 Kullanarak Arkaplan Resmini Tüm Çözünürlüklere Göre Ayarlama (Mayıs Ayı 2024).