Dehnbares Hintergrundbild mit CSS

  2. How-To's
  3. CSS Anleitungen
  4. Dehnbares Hintergrundbild mit CSS
Naila Saad Siddiqui 20 Juni 2023
CSS CSS Background
  1. CSS-Styling auf einer Webseite
  2. CSS-Eigenschaft background-size
Dehnbares Hintergrundbild mit CSS

In diesem kurzen Artikel geht es um die Verwendung von CSS zum Gestalten Ihrer HTML-Seite, wobei der Schwerpunkt auf dem Gestalten eines Hintergrundbilds eines beliebigen HTML-Elements liegt.

CSS-Styling auf einer Webseite

Es gibt mehrere Möglichkeiten, CSS auf Ihrer Webseite zu verwenden:

  • Inline CSS: Inline CSS bedeutet, dass Sie das style-Attribut mit jedem beliebigen HTML-Element verwenden und alle Stileigenschaften speziell auf dieses Element anwenden.
  • Internes CSS: Internes CSS wird verwendet, wenn Sie das Styling auf eine einzelne Seite Ihrer Website anwenden möchten. Schreiben Sie also die Stileigenschaften auf diese Seite, eingeschlossen im Element <style>.
  • Externes CSS: Externes CSS ist der CSS-Typ, der verwendet wird, um das Styling auf alle Seiten der Website anzuwenden. Sie erstellen also ein Stylesheet, das verschiedene Arten von Selektoren und Stileigenschaften enthält und dieses Stylesheet auf allen Webseiten Ihrer Website enthält.

Es gibt mehrere CSS-Eigenschaften, um verschiedene Arten von Stilen anzuwenden. In diesem Artikel konzentrieren wir uns auf die Eigenschaft background-size, mit der die Größe des Hintergrundbilds eines beliebigen Elements festgelegt wird.

CSS-Eigenschaft background-size

Diese CSS-Eigenschaft wird verwendet, wenn wir einen Hintergrund (z. B. ein Bild) angewendet haben und Sie die Größe oder Position dieses Hintergrundbilds innerhalb dieses Elements festlegen müssen. Es gibt vier Möglichkeiten, die Hintergrundgröße einzustellen.

  • Verwenden Sie das Schlüsselwort, um die Größe festzulegen. Die Schlüsselwörter sind auto, cover und contain.
  • Verwenden Sie eine Ein-Wert-Syntax, bei der Sie nur die Breite angeben und die Höhe auf auto eingestellt ist.
  • Verwenden Sie eine Zwei-Werte-Syntax, in der Sie Breiten- und Höhenwerte angeben.
  • Verwenden Sie mehrere Werte für die Hintergrundgröße.

Die Syntax der Eigenschaft background-size.

background-size: auto|contain|cover|initial|inherit|percentage|length
Stichwort Definition
auto Dies ist der Standardwert, bei dem das Hintergrundbild in Originalgröße angezeigt wird.
contain Bei diesem Wert wird das Hintergrundbild so skaliert, dass es vollständig im Element sichtbar ist.
cover Bei diesem Wert wird das Hintergrundbild so angepasst, dass es den Elementcontainer ausfüllt, indem es entweder gestreckt oder an den Rändern abgeschnitten wird.
initial Legt den Standardwert fest.
inherit Es erbt die Größe seines übergeordneten Elements im DOM.
percentage Sie geben die Größe mit einem Prozentwert an.
length Dies dient dazu, den Wert in einer Einheit wie px einzustellen. Wenn eines angegeben ist, wird das andere auf auto gesetzt.

Wir werden einige der oben diskutierten Werte im folgenden Beispiel verwenden.

Im folgenden Beispiel haben wir ein div-Element erstellt, das einen Absatz enthält. Wir werden das Hintergrundbild auf das div-Element anwenden und dann seine verschiedenen Größen einstellen, um die Demonstration aller Werte zu erhalten.

Code - HTML:

<body>
    <h2>background-size: 72% 52%:</h2>
    <div id="container1">
        <p>This div has a background-size of 72% and 52%.</p>
        <br/><br/>
    </div>
    <h2>background-size: 100% 100%:</h2>
    <div id="container2">
        <p>This div has a background-size of 100% and 100%.</p>
        <br/><br/>
    </div>
</body>

Code - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: 72% 52%;
    background-repeat: no-repeat;
}
#container2 {
    background: url(/img/DelftStack/logo.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

In diesem CSS haben wir zwei verschiedene ID-Selektoren erstellt und ihnen unterschiedliche Eigenschaften zugewiesen. In container1, haben wir das Hintergrundbild so eingestellt, dass es 72 % der Breite und 52 % der Höhe abdeckt.

Wohingegen wir in container2 das Hintergrundbild auf 100% Breite und 100% Höhe eingestellt haben.

Im nächsten Beispiel verwenden wir den cover-Wert der background-size. Auf der HTML-Seite reicht nur ein div-Container aus.

Code - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

Code - HTML:

<body>
    <h2>background-size: 72% 52%:</h2>
    <div id="container1">
        <p>This div has a background-size of 72% and 52%.</p><br/><br/>
    </div>
</body>

Wir können sehen, dass das Hintergrundbild bedeckt ist, um das gesamte div-Element auszufüllen.

Wir werden den Eigenschaftswert im nächsten Beispiel als enthalten verwenden, um das Ergebnis zu sehen.

Code - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
}

Beachten Sie, dass das Hintergrundbild im div-Element vollständig sichtbar ist und nicht gestreckt wird, um das gesamte Element abzudecken.

So können wir sehen, wie wir die Eigenschaft background-size einstellen und das Bild entsprechend unseren Bedürfnissen und Anforderungen dehnbar oder sichtbar machen können. Denken Sie daran, dass diese Eigenschaften auf jedes HTML-Element angewendet werden können, genau wie das div-Element.

Verwandter Artikel - CSS Background