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 styleniteliğ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 .