Varsayılan olarak, arka plan görüntüsü özelliği görüntüyü hem yatay hem de dikey olarak tekrarlar.
Bazı görsellerin yalnızca yatay veya dikey olarak tekrarlanması gerekir, aksi takdirde aşağıdaki gibi tuhaf görünebilirler:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("red.png");
}
</style>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu sayfada arka plan resmi var !</p>
</body>
</html>
Yukarıdaki görüntü yalnızca yatay olarak tekrarlanırsa (background-repeat: repeat-x;), arka plan daha iyi görünecektir:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("red.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu sayfada arka plan resmi var !</p>
</body>
</html>
Açık mavi yerine beyaz renk olsaydı daha güzel görünecekti 🙂
İpucu: Bir görüntüyü dikey olarak tekrarlamak için arka plan tekrarını y olarak ayarlamak gereklidir. background-repeat: repeat-y;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("red.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu sayfada arka plan resmi var !</p>
</body>
</html>CSS background-repeat: no-repeat
Arka plan görüntüsünün yalnızca bir kez gösterilmesi de background-repeat özelliği tarafından belirtilir:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bg.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Arka Plan Resim Örneği.</p>
<p>no-repeat ile bir defa tekrar edecek</p>
</body>
</html>
Yukarıdaki örnekte arka plan resmi metinle aynı yere yerleştirilmiştir. Metni çok fazla rahatsız etmemesi için görselin konumunu değiştirmek istediğimizi varsayalım;
CSS background-position
background-position yani arka plan konumunun özelliği, arka plan görüntüsünün konumunu belirtmek için kullanılır.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bg.png");
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Arka Plan Resim Örneği.</p>
<p>no-repeat ile bir defa tekrar edecek</p>
</body>
</html>
