Opakování obrázku na pozadí CSS

Obsah

CSS pozadí-opakování

Ve výchozím nastavení vlastnost background-image opakuje obrázek vodorovně i svisle.

Některé obrázky by se měly opakovat pouze vodorovně nebo svisle, jinak budou vypadat divně, například takto:

Příklad

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

Zkuste to sami →

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

Pokud se obrázek nahoře opakuje pouze vodorovně (background-repeat: repeat-x;), bude pozadí vypadat lepší:

Příklad

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

Zkuste to sami →

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

Tip: Chcete-li obrázek opakovat svisle, nastavte background-repeat: repeat-y;

CSS background-repeat: no-repeat

Zobrazení obrázku na pozadí pouze jednou je také určeno vlastností background-repeat:

Příklad

Zobrazit obrázek na pozadí pouze jednou:

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

Zkuste to sami →

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

Ve výše uvedeném příkladu je obrázek pozadí umístěn na stejném místě jako text. Chceme změnit polohu obrázku tak, aby tomu tak nebylo příliš rušit text.

CSS pozice na pozadí

K tomu se používá vlastnost background-position určete polohu obrázku na pozadí.

Příklad

Umístěte obrázek na pozadí do pravého horního rohu:

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

Zkuste to sami →

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

Vlastnosti opakování a umístění pozadí CSS

background-position: Nastaví počáteční pozici obrázku na pozadí
background-repeat: Nastavuje, jak se bude obrázek na pozadí opakovat