HTML Hintergrundbilder
Für fast jedes HTML-Element kann ein Hintergrundbild angegeben werden.
Hintergrundbild auf einem HTML-Element
Um ein Hintergrundbild zu einem HTML-Element hinzuzufügen, verwenden Sie das HTML-Attribut style und das CSS-Attribut background-image Eigenschaft:
Beispiel
Fügen Sie einem HTML-Element ein Hintergrundbild hinzu:
<div style="background-image: url('img_girl.jpg');">
Try it Yourself »
Sie können das Hintergrundbild auch im Element <style> im Abschnitt <head> angeben:
Beispiel
Geben Sie das Hintergrundbild im Element <style> an:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Try it Yourself »
Hintergrundbild auf einer Seite
Wenn Sie möchten, dass die gesamte Seite ein Hintergrundbild hat, müssen Sie das Hintergrundbild im Element <body> angeben:
Beispiel
Fügen Sie ein Hintergrundbild für die gesamte Seite hinzu:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Try it Yourself »
Hintergrundwiederholung
Wenn das Hintergrundbild kleiner als das Element ist, wiederholt sich das Bild horizontal und vertikal, bis es das Ende des Elements erreicht:
Um zu verhindern, dass sich das Hintergrundbild wiederholt, setzen Sie die Eigenschaft background-repeat auf no-repeat.
Beispiel
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Try it Yourself »
Hintergrundcover
Wenn Sie möchten, dass das Hintergrundbild das gesamte Element abdeckt, können Sie die Eigenschaft background-size auf setzen cover
Um sicherzustellen, dass das gesamte Element immer abgedeckt ist, legen Sie außerdem die Eigenschaft background-attachment auf fest fixed:
Auf diese Weise deckt das Hintergrundbild das gesamte Element ab, ohne dass es zu Dehnungen kommt (das Bild behält seine ursprünglichen Proportionen):
Beispiel
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Try it Yourself »
Hintergrunddehnung
Wenn Sie möchten, dass das Hintergrundbild so gestreckt wird, dass es auf das gesamte Element passt, können Sie die Eigenschaft background-size auf festlegen 100% 100%:
Versuchen Sie, die Größe des Browserfensters zu ändern. Sie werden feststellen, dass sich das Bild zwar ausdehnt, aber immer das gesamte Element abdeckt.
Beispiel
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Try it Yourself »
Erfahren Sie mehr über CSS
Aus den obigen Beispielen haben Sie gelernt, dass Hintergrundbilder mithilfe der CSS-Hintergrundeigenschaften gestaltet werden können.
Um mehr über CSS-Hintergrundeigenschaften zu erfahren, lesen Sie unsere CSS-Hintergrund-Tutorial.
