HTML ve CSS ile bir arka plan resminin tekrar etmesi (repeat) özelliği oldukça basittir. background-repeat özelliği, bir arka plan resminin sayfa boyunca nasıl tekrarlanacağını belirler. Örneğin, bir resmi yatay ve dikey olarak tekrarlamak istiyorsak background-repeat: repeat; kullanabiliriz.
Aşağıdaki örnek kodda, background-repeat özelliği kullanarak bir arka plan resmini yatay ve dikey olarak tekrar edeceğiz:
<!DOCTYPE html>
<html>
<head>
<title>Background Repeat Uygulaması</title>
<style>
body {
background-image: url("resim.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Benim sayfam.</p>
</body>
</html>
Bu örnekte, background-repeat özelliği “repeat” olarak ayarlandığından, arka plan resmi yatay ve dikey olarak sayfa boyunca tekrar edilir. Böylece resim, sayfanın arka planını kaplar.
Ayrıca, background-repeat özelliği “no-repeat” olarak ayarlanırsa, arka plan resmi sadece bir kez gösterilir ve tekrar etmez. Örneğin:
<!DOCTYPE html>
<html>
<head>
<title>Background Repeat Uygulaması</title>
<style>
body {
background-image: url("resim.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Benim sayfam.</p>
</body>
</html>
Bu örnekte, background-repeat özelliği “no-repeat” olarak ayarlandığından, arka plan resmi sadece bir kez gösterilir ve tekrar etmez.
Not: Bu örneklerde, resim.jpg dosyası, kullanılan arka plan resmi dosyasının adıdır. Siz kendi resminizi kullanabilirsiniz.
Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.