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