Arka Plana Resim Ekleme HTML
Arka plana resim eklemek, web sitenizin görünümünü iyileştirmenin ve ziyaretçilerinizin ilgisini çekmenin harika bir yoludur. HTML’de arka plana resim eklemek için birkaç farklı yol vardır. Bu makalede, bu yolları ayrıntılı olarak ele alacağız.
1. CSS Kullanarak Arka Plana Resim Ekleme
Arka plana resim eklemenin en yaygın yolu, CSS kullanmaktır. CSS, web sayfalarının görünümünü kontrol eden bir stil dilidir. Arka plana resim eklemek için aşağıdaki CSS kodunu kullanabilirsiniz:
body {
background-image: url("resim.jpg");
}
Bu kod, web sayfanızın arka planına “resim.jpg” adlı resmi ekleyecektir. Resmi değiştirmek için, “resim.jpg” adlı kısmı değiştirmeniz yeterlidir.
2. HTML Kullanarak Arka Plana Resim Ekleme
Arka plana resim eklemenin bir diğer yolu da, HTML kullanmaktır. HTML, web sayfalarının yapısını kontrol eden bir işaretleme dilidir. Arka plana resim eklemek için aşağıdaki HTML kodunu kullanabilirsiniz:
“`
“`
Bu kod, web sayfanızın arka planına “resim.jpg” adlı resmi ekleyecektir. Resmi değiştirmek için, “resim.jpg” adlı kısmı değiştirmeniz yeterlidir.
### 3. JavaScript Kullanarak Arka Plana Resim Ekleme
Arka plana resim eklemenin bir diğer yolu da, JavaScript kullanmaktır. JavaScript, web sayfalarına etkileşim eklemek için kullanılan bir programlama dilidir. Arka plana resim eklemek için aşağıdaki JavaScript kodunu kullanabilirsiniz:
“`
document.body.style.backgroundImage = “url(‘resim.jpg’)”;
“`
Bu kod, web sayfanızın arka planına “resim.jpg” adlı resmi ekleyecektir. Resmi değiştirmek için, “resim.jpg” adlı kısmı değiştirmeniz yeterlidir.
### Arka Plana Resim Eklerken Dikkat Edilmesi Gerekenler
Arka plana resim eklerken dikkat etmeniz gereken birkaç şey vardır:
* Resmin boyutuna dikkat edin. Çok büyük bir resim, web sayfanızın yüklenmesini yavaşlatabilir.
* Resmin kalitesine dikkat edin. Düşük kaliteli bir resim, web sitenizin görünümünü olumsuz etkileyebilir.
* Resmin telif hakkına dikkat edin. Başkasına ait bir resmi izinsiz olarak kullanmaktan kaçının.
### Faydalı Siteler ve İlgili Dosyalar
* [CSS Arka Plan Resimleri](https://www.w3schools.com/css/css_background.asp)
* [HTML Arka Plan Resimleri](https://www.html.com/tags/background/)
* [JavaScript Arka Plan Resimleri](https://www.javascripttutorial.net/javascript-background-image/)
* [Ücretsiz Arka Plan Resimleri](https://unsplash.com/photos)