Arka Plana Büyük Boyutlu Resim Ekleme CSS
CSS, web sayfalarının stilini kontrol eden bir dildir. Arka plana büyük boyutlu bir görüntü eklemek için CSS’nin background-image
özelliğini kullanabilirsiniz. Bu özelliğin değeri, görüntünüzün URL’si veya yerel bir dosyanın yoludur.
body {
background-image: url("https://example.com/image.jpg");
}
Bu örnekte, body
elementinin arkaplanına https://example.com/image.jpg
adresindeki görüntü eklenmektedir.
Arka Plan Resminin Boyutunu Kontrol Etme
Arka plan resminin boyutunu kontrol etmek için CSS’nin background-size
özelliğini kullanabilirsiniz. Bu özelliğin değeri, resmin genişliğini ve yüksekliğini belirler.
body {
background-image: url("https://example.com/image.jpg");
background-size: cover;
}
Bu örnekte, body
elementinin arkaplanına https://example.com/image.jpg
adresindeki görüntü eklenmektedir. background-size: cover
değeri, resmin genişliğinin ve yüksekliğinin elementin genişliğine ve yüksekliğine göre ayarlanacağı ve resmin kesilmeyeceği veya gerilmeyeceği belirtilmektedir.
Arka Plan Resminin Konumunu Kontrol Etme
Arka plan resminin konumunu kontrol etmek için CSS’nin background-position
özelliğini kullanabilirsiniz. Bu özelliğin değeri, resmin elementin içindeki konumunu belirler.
body {
background-image: url("https://example.com/image.jpg");
background-position: center;
}
Bu örnekte, body
elementinin arkaplanına https://example.com/image.jpg
adresindeki görüntü eklenmektedir. background-position: center
değeri, resmin elementin ortasında konumlandırılacağı belirtilmektedir.
Arka Plan Resminin Tekrarlanma Şeklini Kontrol Etme
Arka plan resminin tekrarlanma şeklini kontrol etmek için CSS’nin background-repeat
özelliğini kullanabilirsiniz. Bu özelliğin değeri, resmin elementin içinde nasıl tekrarlanacağını belirler.
body {
background-image: url("https://example.com/image.jpg");
background-repeat: no-repeat;
}
Bu örnekte, body
elementinin arkaplanına https://example.com/image.jpg
adresindeki görüntü eklenmektedir. background-repeat: no-repeat
değeri, resmin elementin içinde tekrarlanmayacağı belirtilmektedir.
Faydalı Siteler
- CSS Tricks: Arka Plan Resimleri
- Mozilla Developer Network: Arka Plan Resimleri
- W3Schools: Arka Plan Resimleri