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.
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>
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>:
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>
Ställer in bakgrundsbilden för ett element