HTML Arka Plan Resim Yapısı!
HTML’ye arka plan resmi eklemek için, CSS özelliğini kullanın background-image.
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 …