19 – Html Arkaplan Resmi – Background Image
Html öğelerinin arkaplanına (background-image) yani zeminine bir görsel eklemek için kullanılır. Html öğelerinin hepsinde arkaplan resmi belirtilebilir.
Arkaplan Resmi Nasıl Eklenir?
Arkaplan resmi eklemek için html öğesine style niteliğini (attribbute) ekleriz ve background-image anahtar kelimesini kullanırız. url parametresi ile resim yolu belirtilir.
Örnek
<p style="background-image: url('resimYolu');"> Paragraf yazısı </p>
Yukarıdaki örneği denediyseniz varsayılan bir resim ekledim. Ancak bu resim paragrafımız uzun olunca arka arkaya tekrar edildi. Varsayılan olarak olarak bu şekilde. Bunu düzenleyebiliriz:
Arkaplan Resim Tekrarı – Background Repeat
Varsayılan olarak arkaplan resmi eklendiğinde, eğer resmin boyutları resmi eklemek istediğimiz alandan daha küçükse tekrar edecektir.
Örnek
Örnekte görüldüğü üzere resim arkaplanı komple kaplamak için tekrar etti.
Peki arkaplan resminin tekrarını engellemek için background-repeat: no-repeat; kodumuzu eklemeliyiz.
Örnek
<!DOCTYPE html>
<html>
<head>
<title>Html Arkaplan Resim Tekrarı Engelleme</title>
<style>
body{
background-image: url('resim/cicek.png');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p style="color:white; background-color: rgba(0, 0, 0, 0.24);"> Sayfadaki arka plan tekrarını engellemek istedik ve bunun için background-repeat:no-repeat; yazmamız yeterli oldu.</p>
</body>
</html>
Bu örnekte resim tekrar etmedi.
Kullanabileceğimiz background-repeat: no-repeat; olduğu gibi space, round, repeat-x, repeat-y değerlerini de verebiliriz.
Ancak biz resmin tüm sayfayı kaplamasını ve tekrar etmemesini istiyoruz. O zaman cover özelliğini kullanalım:
Arkaplan Resmi Tüm Sayfayı Kaplama – Background Cover
Arkaplan resminin tüm sayfayı kaplaması için cover özelliğinden yararlanırız. Yazılışı background-size:cover;
Cover özelliğini kullanak içi arkaplan tekrarını öncelikle engelleyelim. background-repeat: no-repeat;
Örnek
<!DOCTYPE html>
<html>
<head>
<title>Html Arkaplan Resim Ekranı Kaplama </title>
<style>
body{
background-image: url('resim/cicekler.jpg');
background-repeat: no-repeat;
background-size: cover;
height:650px;
}
</style>
</head>
<body>
<p style="color:white; font-size:20px; background-color: rgba(0, 0, 0, 0.24);"> Arkaplanda resmi tam sayfa göstermek için background-size: cover; özelliğini kullandık. Ancak öncelikle resim tekrarını background-repeat: no-repeat; diyerek engelledik. Sayfada resim tam olarak gözüksün diye yüksekliği 650px olarak ayarladım. Genişlik bildirmedim çünkü resmin yüksekliğine oranla genişliği otomatik olarak ayarlanacak. Eğer resim genişliği bildirirsem resmin orjinal görüntüsü bozulabilir. Bozulmaması için resmin orjinal boyutlarını yükseklik ve genişlik olarak vermem gerekir. </p>
</body>
</html>
Eğer resmimiz tam sayfa olacak şekilde değilse ve ekranı kaplasın istiyorsak strech yani uzatma özelliğini kullanabiliriz.
Arkaplan Resmi Uzatma – Background Strech
Resmi ekrana genişlik ve yükseklik değerleri vererek sığdırabiliriz. Buradaki örnekte içeriğimiz az ve resmin boyutunu genişlik yüzde yüz, yükseklik yüzde yüz olarak ayarladık. Bu durumda resim ekrana tam oturacaktır ancak kendi ölçüleri ile uyuşmadığı için görüntü bozuk olacaktır. Bu ayarları düzgün yapıyor olmamız, seçtiğimiz resmin bize uygun olacak şekilde kullanıyor olmamız gerekmektedir. Bu işin özü bu arkadaşlar…
Örnek
<!DOCTYPE html>
<html>
<head>
<title>Html Arkaplan Resmi Ekranı Kaplama </title>
<style>
body{
background-image: url('resim/cicekler.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<p style="color:white; font-size:20px; background-color: rgba(0, 0, 0, 0.24);"> Arkaplanda resmi tam sayfa göstermek için background-size: cover; özelliğini kullandık. Bir resmin ekranı komple kaplamasını istiyorsak genişlik ve yükseklik değerlerini yüzde yüz yaparak bunu sağlayabiliriz. Eğer bir yükseklik veya genişlik belirtmiyorsak, bu içeriğimiz kadar yer kaplayacaktır. Bazı durumlarda kullanılabilir ancak görüldüğü üzere pek hoş bir görüntü çıkmadı. </p>
</body>
</html>