CSS-Hintergrundbild


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


CSS-Hintergrundbild

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.

Beispiel

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>


Beispiel

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:

Beispiel

 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>



Die CSS-Hintergrundbildeigenschaft

background-image

Legt das Hintergrundbild für ein Element fest