Tutorial zur Größe von CSS-Hintergrundbildern - So codieren Sie ein ganzseitiges Hintergrundbild

Dieses Tutorial zeigt Ihnen eine einfache Möglichkeit, ein ganzseitiges Hintergrundbild mit CSS zu codieren. Außerdem erfahren Sie, wie Sie dieses Bild an die Bildschirmgröße Ihrer Benutzer anpassen können.

Es ist eine häufige Aufgabe im Webdesign, ein Hintergrundbild so zu gestalten, dass es das gesamte Browser-Ansichtsfenster abdeckt. Glücklicherweise kann diese Aufgabe mit ein paar Zeilen CSS erledigt werden.

Cover Viewport mit Bild

Zunächst möchten wir sicherstellen, dass unsere Seite tatsächlich das gesamte Ansichtsfenster abdeckt:

html { min-height: 100%; }

Im Inneren verwenden htmlwir die background-imageEigenschaft, um das Bild festzulegen:

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Magie der Eigenschaft "Hintergrundgröße"

Die Magie geschieht mit der background-sizeEigenschaft:

background-size: cover;

coverWeist den Browser an, sicherzustellen, dass das Bild in diesem Fall immer den gesamten Container abdeckt html. Der Browser deckt den Container auch dann ab, wenn er das Bild strecken oder ein wenig von den Rändern abschneiden muss.

Da der Browser das Bild möglicherweise streckt, sollten Sie ein Hintergrundbild mit einer ausreichend hohen Auflösung verwenden. Andernfalls erscheint das Bild möglicherweise pixelig.

Wenn Sie möchten, dass das gesamte Bild im Hintergrund angezeigt wird, sollten Sie sicherstellen, dass das Bild im Seitenverhältnis im Vergleich zur Bildschirmgröße relativ nahe ist.

So optimieren Sie eine Bildposition und vermeiden das Kacheln

Der Browser kann Ihr Hintergrundbild auch abhängig von seiner Größe als Kacheln anzeigen. Um dies zu verhindern, verwenden Sie no-repeat:

background-repeat: no-repeat;

Um die Dinge schön zu halten, werden wir unser Image immer zentriert halten:

background-position: center center;

Dadurch wird das Bild jederzeit horizontal und vertikal zentriert.

Wir haben jetzt ein vollständig ansprechendes Bild erstellt, das immer den gesamten Hintergrund abdeckt:

html { min-height: 100%; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } 

So fixieren Sie ein Bild beim Scrollen

Nur für den Fall, dass Sie Text über das Hintergrundbild hinzufügen möchten und dieser Text das aktuelle Ansichtsfenster überläuft, möchten Sie möglicherweise sicherstellen, dass Ihr Bild im Hintergrund bleibt, wenn der Benutzer nach unten scrollt, um den Rest des Textes anzuzeigen:

background-attachment: fixed;

Sie können alle oben beschriebenen Hintergrundeigenschaften in Kurznotation einfügen:

background: url(image.jpg) center center cover no-repeat fixed;

Optional: So fügen Sie eine Medienabfrage für Mobilgeräte hinzu

Um dem Kuchen ein Sahnehäubchen hinzuzufügen, möchten Sie möglicherweise eine Medienabfrage für kleinere Bildschirme hinzufügen:

@media only screen and (max-width: 767px) { html { background-image: url(smaller-image.jpg); } } 

Sie können Photoshop oder eine andere Bildbearbeitungssoftware verwenden, um Ihr Originalbild zu verkleinern und die Seitenladegeschwindigkeit bei mobilen Internetverbindungen zu verbessern.

Jetzt, da Sie die Magie der Erstellung eines reaktionsschnellen, ganzseitigen Bildhintergrunds kennen, ist es an der Zeit, einige schöne Websites zu erstellen!

Möchten Sie weitere Tipps und Kenntnisse zur Webentwicklung erhalten?

  • Abonnieren Sie meinen wöchentlichen Newsletter
  • Besuchen Sie meinen Blog bei 1000 Mile World
  • Folge mir auf Twitter