HTML Arka Plan Resimleri
Hemen hemen her HTML öğesi için bir arka plan görüntüsü belirtilebilir.
Bir HTML öğesindeki Arka Plan Resmi
Bir HTML öğesine arka plan resmi eklemek için HTML style
niteliğini ve CSS background-image
özelliğini kullanın:
Örnek
Bir HTML öğesine arka plan resmi ekleyin:
<div style="background-image: url('img_girl.jpg');">
Ayrıca, <style>
elemandaki arka plan görüntüsünü şu <head>
bölümde belirtebilirsiniz:
Örnek
Öğedeki arka plan resmini belirtin <style>
:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Bir Sayfadaki Arka Plan Resmi
Tüm sayfanın bir arka plan görüntüsüne sahip olmasını istiyorsanız, <body>
öğe üzerinde arka plan görüntüsünü belirtmelisiniz:
Örnek
Tüm sayfa için bir arka plan resmi ekleyin:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Arka Plan Tekrarı
Arka plan görüntüsü öğeden daha küçükse, görüntü öğenin sonuna ulaşana kadar yatay ve dikey olarak kendini tekrar eder:
Örnek
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Arka plan görüntüsünün kendini tekrar etmesini önlemek için background-repeat
özelliği olarak ayarlayın no-repeat
.
Örnek
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Arka Plan Kapağı
Arka plan görüntüsünün tüm öğeyi kaplamasını istiyorsanız, background-size
özelliği
şu şekilde ayarlayabilirsiniz:cover.
Ayrıca, tüm öğenin her zaman kapsandığından emin olmak için
background-attachment
özelliği şu şekilde ayarlayın:fixed:
Bu şekilde, arka plan görüntüsü, herhangi bir esneme olmaksızın tüm öğeyi kaplayacaktır (görüntü orijinal orantılarını koruyacaktır):
Örnek
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Arka Plan Streç
Arka plan görüntüsünün tüm öğeye sığacak şekilde uzamasını istiyorsanız, background-size
özelliği
şu şekilde ayarlayabilirsiniz 100% 100%
:
Tarayıcı penceresini yeniden boyutlandırmayı deneyin; görüntünün uzayacağını, ancak her zaman tüm öğeyi kapsayacağını göreceksiniz.
Örnek
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Daha Fazla CSS Öğrenin
Yukarıdaki örneklerden, arka plan resimlerinin CSS arka plan özellikleri kullanılarak şekillendirilebileceğini öğrendiniz.
CSS arka plan özellikleri hakkında daha fazla bilgi edinmek için CSS Arka Plan Eğitimimizi inceleyin .