arka plan görüntüsü CSS'deki özellik, bir görüntüyü bir öğenin arka planı olarak ayarlamak için kullanılır. Bu CSS özelliğini kullanarak bir öğe için bir veya birden fazla arka plan resmi ayarlayabiliriz.
Varsayılan olarak görüntü, bir öğenin sol üst köşesine konumlandırılır ve hem yatay hem de dikey olarak tekrarlanır. Arka plan resmi metin rengine göre seçilmelidir. Metin ve arka plan görselinin kötü kombinasyonu, kötü tasarlanmış ve okunamayan web sayfasının nedeni olabilir.
url() Bu özelliğin değeri herhangi bir görüntüye dosya yolu eklememize olanak tanır. Öğenin arka planını gösterecektir. Arka plan için birden fazla görüntü veya degradeler ve görüntülerin bir karışımını kullanabiliriz. Arka plan görüntüsü yüklenemezse veya degradeleri kullanıyorsak ancak bunlar ilgili tarayıcıda desteklenmiyorsa, öğenin arka plan rengi olarak geri dönüş değerini (ikame olarak kullanılan değer) kullanabiliriz.
maven deposu
Sözdizimi
background-image: url();
Değerler
url(): Bu, resmin URL'sidir. Birden fazla görsel belirtmek istiyorsak URL'leri virgülle ayırabiliriz.
bir ağacın ön sipariş geçişi
Örnek
body { background-image: url('cat.webp'); background-color: lightgray; }Şimdi Test Edin
Çıktı
Örnek
body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); }Şimdi Test Edin
Çıktı
Örnek
body { height: 200px; background-color: #cccccc; background-image: linear-gradient(rgba(0, 0, 255, 0.5),rgba(255, 255, 0, 0.5)), url('lion.webp'); }Şimdi Test Edin
Çıktı