HTML Arka Plan Resimleri

Hemen hemen her HTML ögesine arka plan resmi eklenebilir.

HTML Arka Plan Resmi Ekleme

Bir HTML öğesine arka plan resmi eklemek için HTML style özelliğini ve CSS background-image resmi özelliğini kullanılır:

<p style="background-image: url('arka.jpg');">

Ayrıca arka plan resmini <head> bölümündeki <style> ögesinden de ekleyebilirsiniz.

<style>
p {
  background-image: url('arka.jpg');
}
</style>

HTML Sayfa Arka Plan Resmi

Sayfanın tamamına bir arka plan resmi eklemek istiyorsanız, arka plan resmini <body> öğesinde tanımlamak gerekir:

<style>
body {
  background-image: url('arka.jpg');
}
</style>

HTML Arka Plan Tekrarı

Arka plan resmi, arka plan eklenen ögeden küçükse görüntü öge sonuna ulaşana kadar yatay ve dikey olarak tekrar edecektir.

<style>
body {
  background-image: url('arka.jpg');
}
</style>

Arka plan görüntüsünün tekrarlanmasını önlemek için, background-repeat özelliğini no-repeat olarak düzenlemek gereklidir.

<style>
body {
  background-image: url('arka.jpg');
  background-repeat: no-repeat;
}
</style>

HTML Background Cover Özelliği

Arka plan görüntüsünün ögenin tamamını kaplaması isteniyorsa, background-size özelliğini cover olarak düzenlemek gereklidir.

Ayrıca ögenin tamamının her zaman arka planı kapattığından emin olmak için background-attachment özelliğini fixed olarak düzenlemek gerekir.

Bu şekilde arka plan görüntüsü hiç bir esneme olmadan tüm ögeyi kaplıyor.

<style>
body {
  background-image: url('arka.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

HTML Arka Plan Stretch (Esneme)

Arka plan görüntüsünün ögenin tamamına sığacak şekilde genişletilmesi isteniyorsa background-size özelliğinin 100% 100% olarak ayarlanması gereklidir. Aşağıdaki komutu çalıştırdığınızda tarayıcı penceresini yeniden boyutlandırmayı deneyebilirsiniz. Görsel her zaman uzayacak, görüntü boyutuna göre belki bozulacak ancak ögenin tamamını kaplayacaktır.

<style>
body {
  background-image: url('arka.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

Bu anlattığımız komutlar ilk defa karşılaşanlar için biraz karışık gelebilir. İlerleyen zamanlarda CSS Eğitimi bölümünde daha açıklayıcı bir şekilde ele alınıp anlatılacaktır.

17 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir