HTML Arka Plan Resim Ekleme ve Boyutlandırma
Bir web sayfasına arka plan resmi eklemek, sitenize görsel ilgi ve derinlik katmanın harika bir yoludur. Arka plan resimleri, markanızı yansıtmanıza, belirli bir ruh hali yaratmanıza ve kullanıcı deneyimini iyileştirmenize yardımcı olabilir.
Arka Plan Resmi Ekleme
Bir web sayfasına arka plan resmi eklemek için CSS’yi (Basamaklı Stil Sayfaları) kullanabilirsiniz. CSS, web sayfalarının görünümünü ve düzenini kontrol eden bir stil dilidir.
Arka plan resmi eklemek için aşağıdaki CSS kodunu kullanabilirsiniz:
css
body {
background-image: url("resim.jpg");
}
Bu kod, “resim.jpg” adlı bir görüntüyü web sayfasının arka planı olarak ayarlar. Görüntü dosyasının web sayfanızla aynı dizinde olduğundan emin olun.
Arka Plan Resminin Boyutlandırılması
Arka plan resminin boyutunu kontrol etmek için aşağıdaki CSS özelliklerini kullanabilirsiniz:
- background-size: Arka plan resminin boyutunu belirler.
- background-repeat: Arka plan resminin nasıl tekrarlanacağını belirler.
- background-position: Arka plan resminin konumunu belirler.
background-size özelliği, arka plan resminin boyutunu piksel, yüzde veya anahtar kelimeler (ör. “cover”, “contain”) olarak ayarlar. Örneğin:
css
body {
background-image: url("resim.jpg");
background-size: cover;
}
Bu kod, arka plan resminin web sayfasını tamamen kaplayacak şekilde boyutlandıracaktır.
background-repeat özelliği, arka plan resminin nasıl tekrarlanacağını belirler. Örneğin:
css
body {
background-image: url("resim.jpg");
background-repeat: no-repeat;
}
Bu kod, arka plan resminin yalnızca bir kez görüntüleneceğini belirtir.
background-position özelliği, arka plan resminin konumunu belirler. Örneğin:
css
body {
background-image: url("resim.jpg");
background-position: center center;
}
Bu kod, arka plan resminin web sayfasının ortasına yerleştirileceğini belirtir.
Faydalı Siteler ve Dosyalar
- CSS Arka Plan Özellikleri
- Arka Plan Resimleri için Ücretsiz Kaynaklar
- Arka Plan Resimleri Oluşturucu