Upprepa CSS-bakgrundsbild

Innehållsförteckning

CSS-bakgrundsupprepning

Som standard upprepar egenskapen background-image en bild både horisontellt och vertikalt.

Vissa bilder bör endast upprepas horisontellt eller vertikalt, annars kommer de att se konstiga ut, så här:

Exempel

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

Prova själv →

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

Om bilden ovan endast upprepas horisontellt (background-repeat: repeat-x;), kommer bakgrunden att se ut bättre:

Exempel

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

Prova själv →

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

Tips: För att upprepa en bild vertikalt, ställ in background-repeat: repeat-y;

CSS-bakgrundsupprepning: ingen upprepning

Att bara visa bakgrundsbilden en gång anges också av egenskapen background-repeat:

Exempel

Visa bakgrundsbilden bara en gång:

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

Prova själv →

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

I exemplet ovan är bakgrundsbilden placerad på samma plats som texten. Vi vill ändra bildens position så att den inte gör det störa texten för mycket.

CSS-bakgrundsposition

Egenskapen background-position används för att ange positionen för bakgrundsbilden.

Exempel

Placera bakgrundsbilden i det övre högra hörnet:

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

Prova själv →

<!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-bakgrundsupprepning och positionsegenskaper

background-position: Ställer in startpositionen för en bakgrundsbild
background-repeat: Ställer in hur en bakgrundsbild ska upprepas