Die Eigenschaft background-image
gibt ein Bild an, das als Hintergrund eines Elements verwendet werden soll.
Standardmäßig wird das Bild wiederholt, sodass es das gesamte Element abdeckt.
Legen Sie das Hintergrundbild für eine Seite fest:
body {
background-image: url("paper.gif");
}
Probieren Sie es selbst aus →
<!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>
Dieses Beispiel zeigt eine schlechte Kombination aus Text und Hintergrundbild. Der Text ist kaum lesbar:
body {
background-image: url("bgdesert.jpg");
}
Probieren Sie es selbst aus →
<!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>
Hinweis: Wenn Sie ein Hintergrundbild verwenden, verwenden Sie ein Bild, das den Text nicht stört.
Das Hintergrundbild kann auch für bestimmte Elemente festgelegt werden, wie zum Beispiel das <p>-Element:
p {
background-image: url("paper.gif");
}
Probieren Sie es selbst aus →
<!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>
Legt das Hintergrundbild für ein Element fest