CSS-háttérkép ismétlése

Tartalomjegyzék

CSS háttér-ismétlés

Alapértelmezés szerint a background-image tulajdonság vízszintesen és függőlegesen is megismétli a képet.

Egyes képeket csak vízszintesen vagy függőlegesen kell megismételni, különben furcsán néznek ki, például:

Példa

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

Próbálja ki Ön is →

<!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>

Ha a fenti kép csak vízszintesen ismétlődik (background-repeat: repeat-x;), a háttér kinéz jobb:

Példa

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

Próbálja ki Ön is →

<!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>

Tipp: Egy kép függőleges ismétléséhez állítsa be a background-repeat: repeat-y; beállítást

CSS háttér-ismétlés: nincs ismétlés

A háttérkép csak egyszeri megjelenítését a background-repeat tulajdonság is meghatározza:

Példa

Csak egyszer jelenítse meg a háttérképet:

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

Próbálja ki Ön is →

<!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>

A fenti példában a háttérkép ugyanoda van elhelyezve, mint a szöveg. Meg akarjuk változtatni a kép helyzetét, hogy ne így legyen túlságosan zavarja a szöveget.

CSS háttérpozíció

A background-position tulajdonságot használják adja meg a háttérkép pozícióját.

Példa

Helyezze el a háttérképet a jobb felső sarokban:

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

Próbálja ki Ön is →

<!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>

A CSS háttér ismétlési és pozíció tulajdonságai

background-position: Beállítja a háttérkép kiinduló helyzetét
background-repeat: Beállítja, hogyan ismétlődjön a háttérkép