Gentag CSS-baggrundsbillede

Indholdsfortegnelse

CSS-baggrund-gentag

Som standard gentager egenskaben baggrundsbillede et billede både vandret og lodret.

Nogle billeder bør kun gentages vandret eller lodret, ellers vil de se mærkelige ud, sådan her:

Eksempel

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

Prøv det selv →

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

Hvis billedet ovenfor kun gentages vandret (background-repeat: repeat-x;), vil baggrunden se ud bedre:

Eksempel

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

Prøv det selv →

<!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: For at gentage et billede lodret skal du indstille background-repeat: repeat-y;

CSS-baggrundsgentagelse: ingen gentagelse

Visning af baggrundsbilledet kun én gang er også angivet af egenskaben background-repeat:

Eksempel

Vis kun baggrundsbilledet én gang:

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

Prøv det selv →

<!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 eksemplet ovenfor er baggrundsbilledet placeret samme sted som teksten. Vi ønsker at ændre placeringen af billedet, så det ikke gør det forstyrre teksten for meget.

CSS-baggrundsposition

Egenskaben baggrundsposition bruges til angiv placeringen af baggrundsbilledet.

Eksempel

Placer baggrundsbilledet i øverste højre hjørne:

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

Prøv det selv →

<!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-baggrundsgentagelse og positionsegenskaber

background-position: Indstiller startpositionen for et baggrundsbillede
background-repeat: Indstiller, hvordan et baggrundsbillede skal gentages