CSS bakgrundsbild


Innehållsförteckning

    Visa innehållsförteckning


CSS bakgrundsbild

Egenskapen background-image anger en bild som ska användas som bakgrund för ett element.

Som standard upprepas bilden så att den täcker hela elementet.

Exempel

Ställ in bakgrundsbilden för en sida:

body {
  background-image: url("paper.gif");
}

Prova själv →

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

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>


Exempel

Det här exemplet visar en dålig kombination av text och bakgrundsbild. Texten är knappast läsbar:

body {
  background-image: url("bgdesert.jpg");
}

Prova själv →

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

<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>

</body>
</html>


Obs! När du använder en bakgrundsbild, använd en bild som inte stör texten.

Bakgrundsbilden kan också ställas in för specifika element, som elementet <p>:

Exempel

 p {
  background-image: url("paper.gif");
}

Prova själv →

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

<h1>Hello World!</h1>

<p>This paragraph has an image as the background!</p>

</body>
</html>



Egenskapen för CSS-bakgrundsbild

background-image

Ställer in bakgrundsbilden för ett element