Egenskaben baggrundsbillede angiver et billede, der skal bruges som baggrund for et element.
Som standard gentages billedet, så det dækker hele elementet.
Indstil baggrundsbilledet for en side:
body {
background-image: url("paper.gif");
}Prøv det selv →
<!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>
Dette eksempel viser en dårlig kombination af tekst og baggrundsbillede. Teksten er næppe læselig:
body {
background-image: url("bgdesert.jpg");
}Prøv det selv →
<!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>
Bemærk: Når du bruger et baggrundsbillede, skal du bruge et billede, der ikke forstyrrer teksten.
Baggrundsbilledet kan også indstilles til specifikke elementer, såsom elementet <p>:
p {
background-image: url("paper.gif");
}Prøv det selv →
<!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>
Indstiller baggrundsbilledet for et element