Einführung

Die Größe des Hintergrundbildes können wir mit Hilfe der Eigenschaft „background-size“ bestimmen. Wir können das Bild links, gestreckt und an den verfügbaren Platz anpassen. Es gibt so viele Syntaxen für die Implementierung der Eigenschaft „Hintergrundgröße“. Wir können die Eigenschaft der Eigenschaft „Hintergrundgröße“ mithilfe von Werten und Einheitenwerten festlegen.

In Einheitswerten können wir die Eigenschaft „Hintergrundgröße“ in Form von Prozentsätzen oder Pixeln definieren. Wir können es auch mit Hilfe des globalen Werts definieren. Mithilfe des folgenden Snippets können wir es mithilfe des globalen Werts implementieren.

Winterschlaf-Dialekt

 .card-hero inherit 

Lassen Sie uns das Thema kurz verstehen.

Schlüsselwortwerte

Wir können den Schlüsselwortwert mit Hilfe von Cover und Contain verwenden. Mithilfe dieser Schlüsselwortwerte können wir die Hintergrundgröße ändern.

1. Abdeckung:

Mit Hilfe des Schlüsselworts cover können wir die Hintergrundgröße festlegen. Wenn wir die Hintergrundgröße als Cover definieren, passt das Bild in den Container, ohne Platz zu lassen. Dadurch wird auch das Bild an den Bildschirm angepasst.

Lassen Sie uns dies anhand des folgenden Beispiels verstehen.

Beispiel 1:

Code:

 Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url(&apos;https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp&apos;); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> 

Ausgabe

Erläuterung:

String als int umwandeln

Im obigen Code werden drei Hintergrundbilder mithilfe der Eigenschaft „Hintergrundbild“ kombiniert. Die Eigenschaft „background-size“ gibt die Größen für jedes Hintergrundbild an: 30 % Breite für das erste Bild, 40 % Breite für das zweite Bild und Cover für das dritte Bild. Die Eigenschaft „Hintergrundposition“ wird für jedes Bild unterschiedlich festgelegt, um eine ausgewogene Komposition zu erzielen.