HTML -Hintergrundbilder
Für fast jedes HTML-Element kann ein Hintergrundbild angegeben werden.
Hintergrundbild auf einem HTML-Element
Um einem HTML-Element ein Hintergrundbild hinzuzufügen, verwenden Sie das HTML- styleAttribut und die CSS - background-imageEigenschaft:
Beispiel
Fügen Sie einem HTML-Element ein Hintergrundbild hinzu:
<div style="background-image: url('img_girl.jpg');">
Sie können das Hintergrundbild auch im <style>
Element angeben, im <head>
Abschnitt:
Beispiel
Geben Sie das Hintergrundbild im <style>
Element an:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Hintergrundbild auf einer Seite
Wenn Sie möchten, dass die gesamte Seite ein Hintergrundbild hat, müssen Sie das Hintergrundbild auf dem <body>Element angeben:
Beispiel
Fügen Sie ein Hintergrundbild für die gesamte Seite hinzu:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Hintergrund Wiederholung
Wenn das Hintergrundbild kleiner als das Element ist, wiederholt sich das Bild horizontal und vertikal, bis es das Ende des Elements erreicht:
Beispiel
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Um zu vermeiden, dass sich das Hintergrundbild wiederholt, setzen Sie die background-repeatEigenschaft auf no-repeat.
Beispiel
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Hintergrundabdeckung
Wenn Sie möchten, dass das Hintergrundbild das gesamte Element bedeckt, können Sie die background-sizeEigenschaft auf
festlegencover.
Um sicherzustellen, dass immer das gesamte Element bedeckt ist, setzen Sie die
background-attachmentEigenschaft auffixed:
Auf diese Weise bedeckt das Hintergrundbild das gesamte Element ohne Dehnung (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>
Hintergrundausdehnung
Wenn Sie möchten, dass das Hintergrundbild so gestreckt wird, dass es auf das gesamte Element passt, können Sie die background-sizeEigenschaft auf
setzen 100% 100%:
Versuchen Sie, die Größe des Browserfensters zu ändern, und Sie werden sehen, dass sich das Bild dehnt, aber immer das gesamte Element bedeckt.
Beispiel
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Erfahren Sie mehr 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, studieren Sie unser CSS-Hintergrund-Tutorial .