CSS Arka Plan Görüntüsü Tekrarı

İçindekiler

CSS arka plan tekrarı

Varsayılan olarak background-image ö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:

Örnek

body
{
  background-image: url("gradient_bg.png");
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("gradient_bg.png");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Strange background image...</p>

</body>
</html>

Yukarıdaki resim yalnızca yatay olarak tekrarlanıyorsa (background-repeat: Repeat-x;), arka plan şu şekilde görünecektir: daha iyi:

Örnek

body
{
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>

İpucu: Bir görüntüyü dikey olarak yinelemek için background-repeat: Repeat-y;'i ayarlayın.

CSS arka plan tekrarı: tekrar yok

Arka plan görüntüsünün yalnızca bir kez gösterilmesi de background-repeat özelliği tarafından belirtilir:

Örnek

Arka plan resmini yalnızca bir kez göster:

body
{
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image only shows once, but it is disturbing the reader!</p>

</body>
</html>

Yukarıdaki örnekte arka plan resmi metinle aynı yere yerleştirilmiştir. Görüntünün konumunu değiştirmek istiyoruz, böylece metni çok fazla rahatsız etmek.

CSS arka plan konumu

background-position özelliği şunu yapmak için kullanılır: arka plan görüntüsünün konumunu belirtin.

Örnek

Arka plan resmini sağ üst köşeye yerleştirin:

body
{
   
background-image: url("img_tree.png");
   
background-repeat: no-repeat;
   
background-position: right top;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, the background image is only shown once. In addition it is positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>

</body>
</html>

CSS Arka Plan Tekrarı ve Konum Özellikleri

background-position: Bir arka plan görüntüsünün başlangıç konumunu ayarlar
background-repeat: Bir arka plan resminin nasıl tekrarlanacağını ayarlar