Webdesign spielt eine wichtige Rolle bei der Schaffung eines ansprechenden und ästhetischen Aussehens von Webseiten. Eine Möglichkeit, Webseiten zu dekorieren, besteht darin, Hintergrundbilder zu verwenden. Hintergrundbilder können einer Website Abwechslung und Originalität verleihen und sie attraktiver und einprägsamer machen.
Um jedoch ein spektakuläres Design zu erstellen, ist es manchmal notwendig, ein Hintergrundbild im Vollbildmodus zu erstellen. In diesem Artikel werden wir uns ansehen, wie man dies mit CSS macht.
Der erste Schritt zum Erstellen eines Vollbildhintergrundbildes besteht darin, das richtige Bild auszuwählen. Das Bild sollte eine ausreichend hohe Auflösung haben, damit es auf den meisten Geräten klar und hochwertig aussieht. Es wird empfohlen, ein Bild mit einem Seitenverhältnis von 16:9 zu verwenden, da dies das gängigste Anzeigeformat ist.
Als nächstes können wir die Eigenschaft verwenden, um das Hintergrundbild für den gesamten Bildschirm in CSS anzupassen background-size. Setzen Sie den Wert auf cover. wir stellen sicher, dass das Hintergrundbild gestreckt und skaliert wird, um den gesamten sichtbaren Bereich des Bildschirms vollständig zu füllen. Darüber hinaus ist die Eigenschaft background-position legt fest, wie das Bild auf dem Bildschirm platziert wird.
So wird der entsprechende CSS-Code aussehen:
background-position: center center;
Wie erstelle ich ein Vollbild-Hintergrundbild auf einer Website mit CSS
- Erstellen Sie einen Block mit einem Hintergrundbild
- Stellen Sie die Breite und Höhe des Blocks auf 100% ein.
- Legen Sie die Eigenschaft background-size auf cover fest.
- Legen Sie die Eigenschaft background-position auf center fest.
- Setzen Sie die background-repeat-Eigenschaft auf no-repeat.
Erstellen Sie zunächst einen Block, in dem sich das Hintergrundbild befindet. Verwenden Sie dazu ein HTML-Tag mit einer eindeutigen ID.
Fügen Sie dann die Stile für diesen Block zu Ihrer CSS-Datei hinzu, um den Pfad zum Bild anzugeben und die gewünschten Hintergrundoptionen festzulegen.
#bg-img
In der Eigenschaft background-image müssen Sie den Pfad zu Ihrem Bild angeben. Verwenden Sie einen relativen Pfad oder einen absoluten Pfad, abhängig vom Speicherort Ihres Bildes auf dem Server.
Mit den Hintergrundeinstellungen background-size, background-position und background-repeat können Sie die Position und das Verhalten des Hintergrundbilds anpassen. Durch den Wert cover in der background-size-Eigenschaft wird das Bild so gedehnt oder komprimiert, dass es die gesamte verfügbare Fläche des Blocks einnimmt. Der Wert center in der Eigenschaft background-position ermöglicht es dem Bild, sich in der Mitte des Blocks zu befinden. Legen Sie in der Eigenschaft background-repeat den Wert no-repeat fest, damit das Bild nicht wiederholt wird.
Jetzt wird Ihr Block ein Vollbild-Hintergrundbild haben! Sie können die Stile und Größen des Blocks nach Ihren Anforderungen weiter anpassen.
Das Konzept des Hintergrundbildes verstehen
Die Hauptidee hinter dem Hintergrundbild ist, dass es die Größe oder Position des Elements nicht beeinflusst, sondern nur die Rückseite des Elements ausfüllt. Dies bedeutet, dass das Hintergrundbild die Größe oder Position des Elements, auf das es angewendet wurde, nicht beeinflusst.
Wenn Sie ein Hintergrundbild im Vollbildmodus festlegen möchten, können Sie eine Eigenschaft für das Hintergrundbild festlegen background-size mit Wert cover. Dieser Wert bewirkt, dass das Bild so skaliert wird, dass es den Hintergrund des Elements vollständig bedeckt und den gesamten verfügbaren Bereich ausfüllt. Alternativ können Sie die Eigenschaft verwenden background-position, um die Position des Bildes auf dem Hintergrund des Elements zu steuern.
Zum Beispiel können Sie den folgenden CSS-Code verwenden, um das Hintergrundbild auf den gesamten Bildschirm einzustellen:
In diesem Beispiel verwenden wir ein Bild mit dem Namen "my-image.jpg" als Hintergrundbild. Der Cover-Wert für background-size bewirkt, dass das Bild so gedehnt oder verkleinert wird, dass es den Hintergrund des Elements vollständig bedeckt. Mit dem center-Wert für background-position wird das Bild in der Mitte des Hintergrunds des Elements platziert.
Jetzt, da Sie das Konzept eines Hintergrundbildes in CSS verstehen und wissen, wie Sie es verwenden können, um Hintergrundeffekte auf Webseiten zu erstellen, können Sie ganz einfach schöne und stilvolle Designs erstellen, die Ihre Benutzer begeistern werden.
Vorbereiten eines Bildes für die Verwendung in CSS
Bevor Sie ein Bild mithilfe von CSS als Hintergrundelement für die gesamte Seite verwenden, müssen Sie es ordnungsgemäß vorbereiten.
Die Größe, das Format und die Auflösung eines Bildes sind wichtige Aspekte bei der Erstellung eines Bildes. Betrachten Sie diese Aspekte genauer.
1. Bildformat:
Das Bild muss die richtige Größe haben, um auf der gesamten Seite angezeigt zu werden. Bilder mit einer Pixelgröße von 1920x1080 werden häufig verwendet, da dies die Standardauflösung für die meisten Bildschirme ist. Sie können jedoch auch andere Größen wählen, abhängig von den Designanforderungen.
2. Seitenverhältnis:
Für die Verwendung in CSS sind JPEG, PNG und GIF die am besten geeigneten Formate. JPEG bietet eine gute Komprimierung und eignet sich für Fotos, und PNG behält die Transparenz und Klarheit der Details bei, was es zu einem bevorzugten Format für Bilder mit Text oder Grafiken macht. GIF wird normalerweise für animierte Bilder verwendet.
3. Bildauflösung:
Die Bildauflösung sollte ausreichen, um einen klaren und hochwertigen Hintergrund zu erzeugen. Es wird empfohlen, ein Bild mit 72 dpi (dpi) zu speichern, da dies die Standardauflösung für Bildschirme ist.
Sobald das Bild vorbereitet ist, kann es in CSS als Hintergrundelement für die gesamte Seite verwendet werden. Sie können die Eigenschaft background-image festlegen und den Pfad zum Bild im CSS-Code angeben.
| body |
| background-image: url('Bildpfad'); |
| > |
Jetzt sind Sie bereit, das vorbereitete Bild in CSS zu verwenden, um ein schönes Hintergrundelement für die gesamte Seite zu erstellen!
Anwenden eines Hintergrundbildes auf den gesamten Bildschirm
Oft möchten wir, dass das Hintergrundbild den gesamten Bildschirmbereich unserer Website einnimmt. Dies kann leicht mit CSS erreicht werden.
Zuerst müssen wir ein Hintergrundbild für unser Element festlegen. Wir können dies mit einer Eigenschaft tun background-image. Wir können einen Bildlink verwenden oder den Pfad zu einem Bild auf unserem Server angeben.
Als nächstes müssen wir angeben, dass das Hintergrundbild die gesamte Fläche des Elements einnehmen sollte, anstatt sich wiederholend oder gestreckt zu sein. Wir können dies mit einer Eigenschaft tun background-size. Bedeutung cover dehnt das Bild so aus, dass es das Element vollständig ausfüllt, während es die Proportionen beibehält. Bedeutung contain legt den Maßstab so fest, dass das Bild vollständig in das Element passt.
Wir können auch die Position des Bildes im Hintergrund mit der Eigenschaft angeben background-position. Wenn wir möchten, dass das Bild zentriert ist, können wir den Wert verwenden center.
Schließlich müssen wir, damit unser Hintergrundbild die gesamte Bildschirmfläche einnimmt, die Höhe und Breite des Elements auf 100 festlegen%:
background-image: url('Pfad zu Bild.jpg');
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
Jetzt wird unser Hintergrundbild den gesamten Bildschirmbereich unserer Website beanspruchen, wodurch ein spektakulärer visueller Effekt entsteht.
Erweiterte Einstellungen und Effekte
Wenn Sie mit Hintergrundbildern in CSS arbeiten, können Sie zusätzliche Einstellungen und Effekte anwenden, um den Hintergrund attraktiver und einzigartiger zu gestalten.
Ein solcher Effekt ist die Hintergrundunschärfe. Dazu können Sie die Eigenschaft verwenden filter und einen Wert festlegen blur() wo in Klammern der Wert für den Unschärfenradius angegeben wird. Je größer der Radius ist, desto stärker wird die Hintergrundunschärfe.
Ein weiterer interessanter Effekt ist das Überlagern einer halbtransparenten Farbschicht auf das Hintergrundbild. Dazu können Sie die Eigenschaft verwenden background-color und einen Wert mit Transparenz festlegen (z. B. rgba(255, 255, 255, 0.5)). Um die Transparenz zu erhöhen oder zu verringern, müssen Sie den letzten Wert zwischen 0 und 1 ändern.
Sie können auch einen Texturüberlagerungseffekt auf den Hintergrund anwenden. Dazu können Sie die Eigenschaft verwenden background-image und geben Sie den Pfad zum Texturbild an. Sie können Werte festlegen, damit die Textur den gesamten Hintergrund einnimmt background-repeat: no-repeat und background-size: cover.
Schließlich können Sie mithilfe von CSS-Animationen die Bewegung des Hintergrundbildes erstellen. Verwenden Sie dazu die Eigenschaft animation und legen Sie Werte für die Dauer der Animation, den Animationstyp und deren Füllung fest. Sie können beispielsweise Folgendes angeben animation: slide 10s infinite linear, wo slide - name der Animation, 10s - dauer der Animation, infinite - endlose Wiederholung der Animation, und linear - gleichmäßige Änderung der Parameter.
