HTML Arka Plan Resim Yapısı!

#HTML

HTML Arka Plana Resim Ekleme yöntemleri ve arka plan resimlerini nasıl düzenleyeceğinize dair ipuçları.

HTML Arka Plana Resim Ekleme!
HTML Arka Plana Resim Ekleme!

HTML’ye arka plan resmi eklemek için, CSS özelliğini kullanın background-image.

HTML Arka Plana Resim Ekleme!
HTML Arka Plana Resim Ekleme!

HTML öğesinde Arkaplan Resmi

Bir HTML öğesine arka plan görüntüsü eklemek için şu styleözelliği kullanabilirsiniz :

HTML öğesinde arka plan resmi ekleyin:

İsterseniz kendi dosyalarınızdaki resmi kullanabilirsiniz;
<div style="background-image: url('arkaplan-resim.jpg');">
İsterseniz uzak sunucuda bir resmi kullanabilirsiniz;
<div style="background-image: url('hhtps//armyyazilim.com/arkaplan-resim.jpg');">

Sayfadaki Arka Plan Görüntüsü

Tüm sayfanın arka plan görüntüsüne sahip olmasını istiyorsanız, <body>öğenin arka plan görüntüsünü belirtmelisiniz :

HTML sayfasına arka plan resmi ekleyin:

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

Arkaplan Tekrarı

Arka plan görüntüsü öğeden küçükse, görüntü, öğenin sonuna ulaşana kadar yatay ve dikey olarak kendini tekrar eder.

Açıklamak için, küçük bir görüntüyü büyük bir div öğesinin arka planı olarak kullandığımızda neler olacağını görün:

background-image sonuna ulaşana kadar mülk görüntülerle div öğesi doldurmaya çalışacaktır.

<style>
body {
  background-image: url('https://armyyazilim.com/wp-content/uploads/2019/11/icon-256x256-7.png');
}
</style>

Çıktısı;

See the Pen arkaplan resim by ArmyYazılım (@armyyazilim) on CodePen.

Arka plan görüntüsünün kendisini tekrar etmesini önlemek için background-repeatözelliği kullanın .

<style>
body {
  background-image: url('https://armyyazilim.com/wp-content/uploads/2019/11/icon-256x256-7.png');
  background-repeat: no-repeat;
}
</style>

Çıktısı;

See the Pen tekrarsız arkaplan resmi by ArmyYazılım (@armyyazilim) on CodePen.

Arkaplan Cover

Arka plan görüntüsünün tüm öğeyi kaplamasını istiyorsanız, background-sizeözelliği cover.

Ayrıca, tüm öğenin daima kaplandığından emin olmak için, background-attach özelliğini sabit olarak ayarlayın:

<style>
body {
  background-image: url('https://armyyazilim.com/wp-content/uploads/2019/11/icon-256x256-7.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

Çıktısı;

See the Pen arkaplan resmi cover by ArmyYazılım (@armyyazilim) on CodePen.

ArkaPlan Stretch

Arka plan görüntüsünün, öğedeki tüm görüntünün sığması için uzatılmasını istiyorsanız, background-sizeözelliği aşağıdaki gibi ayarlayabilirsiniz 100% 100%:

Tarayıcı penceresini yeniden boyutlandırmayı deneyin; görüntünün uzayacağını göreceksiniz, ancak her zaman tüm öğeyi kaplayın.

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

Yukarıdaki örneklerden, arka plan görüntülerinin CSS arka plan özelliklerini kullanarak stillendirilebileceğini öğrendiniz.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İçerik Metası
İbrahim Bozkurt ////