HTML Arka Plan Fotoğrafı Ekleme: Kapsamlı Bir Kılavuz
Bir web sitesinin görsel çekiciliğini artırmak için arka plan fotoğrafları kullanmak etkili bir yoldur. HTML’de arka plan fotoğrafı eklemek, web sitenize profesyonel ve ilgi çekici bir görünüm kazandırmanın basit ve etkili bir yoludur. Bu kapsamlı kılavuzda, HTML’de arka plan fotoğrafı eklemenin adım adım sürecini inceleyeceğiz.
Adım 1: HTML Belgesi Oluşturma
İlk adım, bir HTML belgesi oluşturmaktır. Metin düzenleyicinizi açın ve aşağıdaki kodu girin:
“`html
“`
Adım 2: Arka Plan Fotoğrafını Seçme
Arka plan fotoğrafınızı seçerken, web sitenizin genel estetiği ve amacı ile uyumlu olduğundan emin olun. Yüksek çözünürlüklü, net ve ilgi çekici bir görüntü seçin.
Adım 3: Arka Plan Fotoğrafını Yükleme
Arka plan fotoğrafınızı web sitenizin kök dizinine yükleyin. Görüntü dosyasının adını not edin, çünkü bu bilgiyi HTML kodunda kullanacağız.
Adım 4: HTML Koduna Arka Plan Fotoğrafı Ekleme
HTML belgenize geri dönün ve <body> etiketinin içine aşağıdaki kodu ekleyin:
“`html
“`
“arka_plan_fotografi.jpg” ifadesini yüklediğiniz görüntü dosyasının adıyla değiştirin.
### Adım 5: Arka Plan Fotoğrafının Konumunu ve Boyutunu Ayarlama
Arka plan fotoğrafının konumunu ve boyutunu ayarlamak için aşağıdaki CSS özelliklerini kullanabilirsiniz:
* **background-position:** Fotoğrafın yatay ve dikey konumunu ayarlar.
* **background-size:** Fotoğrafın boyutunu ayarlar.
Örneğin, aşağıdaki kod arka plan fotoğrafını sayfanın sağ üst köşesine yerleştirir ve orijinal boyutunu korur:
“`css
body {
background-position: right top;
background-size: auto;
}
“`
### Adım 6: Arka Plan Fotoğrafının Tekrarını Ayarlama
Arka plan fotoğrafının sayfada nasıl tekrarlanacağını ayarlamak için aşağıdaki CSS özelliğini kullanabilirsiniz:
* **background-repeat:** Fotoğrafın yatay ve dikey olarak nasıl tekrarlanacağını belirler.
Örneğin, aşağıdaki kod arka plan fotoğrafını yatay olarak tekrarlar:
“`css
body {
background-repeat: repeat-x;
}
“`
### Faydalı Siteler ve Dosyalar
* [W3Schools HTML Arka Plan Görüntüleri](https://www.w3schools.com/css/css_background_images.asp)
* [CSS Arka Plan Özellikleri](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
* [Ücretsiz Stok Fotoğrafları](https://unsplash.com/)
### Sonuç
HTML’de arka plan fotoğrafı eklemek, web sitenizin görsel çekiciliğini artırmanın basit ve etkili bir yoludur. Bu kılavuzda açıklanan adımları izleyerek, web sitenize profesyonel ve ilgi çekici bir görünüm kazandırabilirsiniz. Arka plan fotoğrafının konumunu, boyutunu ve tekrarını ayarlayarak web sitenizin genel estetiğini özelleştirebilirsiniz.