HTML Arka Plana Fotoğraf Ekleme: Kapsamlı Bir Kılavuz
Bir web sitesinin arka planına bir fotoğraf eklemek, görsel çekiciliği artırmanın ve ziyaretçiler üzerinde olumlu bir izlenim bırakmanın etkili bir yoludur. HTML kullanarak arka plan fotoğrafları eklemek nispeten basit bir işlemdir ve bu kılavuz, bunu nasıl yapacağınız konusunda adım adım talimatlar sağlayacaktır.
HTML’de Arka Plan Fotoğrafı Ekleme
HTML’de arka plan fotoğrafı eklemek için background-image CSS özelliğini kullanabilirsiniz. Bu özellik, bir URL veya dosya yolu aracılığıyla bir görüntü kaynağı belirlemenizi sağlar.
“`html
“`
Yukarıdaki örnekte, `bg-image.jpg` adlı bir görüntü dosyası arka plan olarak kullanılacaktır.
### Arka Plan Fotoğrafı Konumlandırma
Arka plan fotoğrafının konumunu `background-position` özelliğiyle kontrol edebilirsiniz. Bu özellik, görüntünün yatay ve dikey olarak nasıl hizalanacağını belirlemenizi sağlar.
“`html
“`
Yukarıdaki örnekte, arka plan fotoğrafı yatay ve dikey olarak ortalanacaktır.
### Arka Plan Fotoğrafı Boyutlandırma
Arka plan fotoğrafının boyutunu `background-size` özelliğiyle kontrol edebilirsiniz. Bu özellik, görüntünün arka plan alanına nasıl sığacağını belirlemenizi sağlar.
“`html
“`
Yukarıdaki örnekte, arka plan fotoğrafı arka plan alanını tamamen kaplayacak şekilde ölçeklendirilecektir.
### Arka Plan Fotoğrafı Tekrarlama
Arka plan fotoğrafının nasıl tekrarlanacağını `background-repeat` özelliğiyle kontrol edebilirsiniz. Bu özellik, görüntünün yatay ve dikey olarak nasıl tekrarlanacağını belirlemenizi sağlar.
“`html
“`
Yukarıdaki örnekte, arka plan fotoğrafı tekrarlanmayacaktır.
### Faydalı Siteler ve Dosyalar
* [CSS Arka Plan Özellikleri](https://www.w3schools.com/cssref/css3_pr_background.asp)
* [Arka Plan Görüntüleri için Ücretsiz Stok Fotoğrafları](https://unsplash.com/photos/backgrounds)
* [Arka Plan Görüntüleri için Ücretsiz Vektörler](https://www.freepik.com/vectors/background)
### Sonuç
HTML kullanarak arka plan fotoğrafları eklemek, web sitenizin görsel çekiciliğini artırmanın ve ziyaretçiler üzerinde olumlu bir izlenim bırakmanın etkili bir yoludur. `background-image`, `background-position`, `background-size` ve `background-repeat` CSS özelliklerini kullanarak arka plan fotoğraflarının konumunu, boyutunu ve tekrarını kontrol edebilirsiniz. Bu kılavuzdaki talimatları izleyerek, web sitenize kolayca arka plan fotoğrafları ekleyebilir ve görsel etkisini artırabilirsiniz.