Heutzutage sind Websites mit responsiven Hintergrundbildern gefragt. Responsive Websites bieten Benutzern ein ideales Benutzererlebnis auf fast allen Geräten, einschließlich Mobiltelefonen, Tablets oder Desktops. Responsive Bilder können den Hintergrund der Website, die Bildschirmgröße und die Abmessungen anpassen. Responsive Bilder sorgen dafür, dass Qualität und Proportionen erhalten bleiben. Darüber hinaus lädt die Website mit responsiven Hintergrundbildern schnell.
In dieser Anleitung finden Sie Anweisungen zum Anpassen der Hintergrundbilder an die Bildschirmabmessungen.
Wie passt man Hintergrundbilder an die Bildschirmabmessungen an?
Das Bild kann an die Bildschirmabmessungen angepasst werden, indem Sie die unten aufgeführten schrittweisen Anweisungen befolgen.
Schritt 1: Erstellen Sie eine HTML-Struktur
Erstellen Sie zunächst eine HTML-Struktur und fügen Sie das externe Stylesheet mithilfe von hinzu Tag im Head-Bereich von HTML. Platzieren Sie dazu einfach das „ ” im Head-Tag. Der ' rel „Tag gibt die Beziehung der Datei zum HTML-Dokument an. Der ' href „Tag gibt die CSS-Dateiadresse an:
< html >
< Kopf >
< Verknüpfung rel = „Stylesheet“ href = „style.css“ >
< Titel > Responsives Hintergrundbild Titel >
Kopf >
< Körper >
-- Bereich zum Hinzufügen des anderen Inhalts-- >
Körper >
html >
Schritt 2: CSS anwenden
Wenden Sie nun das CSS auf „ Körper ' Abschnitt. Geben Sie zunächst das Hintergrundbild an. Benutzen Sie dazu die „ Hintergrundbild ” und geben Sie das „ URL() ” Wert, der die Bilddateiadresse enthält.
Verwenden Sie danach die Funktion „ Hintergrundbild ” um die Bildgröße anzugeben, das „ Hintergrund Wiederholung ”-Eigenschaft, um die Wiederholung des Bildes festzulegen, und „ Hintergrundanhang ” um festzulegen, ob das Bild mit dem Rest der Seite scrollt oder nicht. Stellen Sie abschließend „ Marge ' Und ' Polsterung ' Zu ' 0 ”:
Körper {Hintergrundbild: URL ( „testbild.jpg“ ) ;
Hintergrundgröße: 100 % 100 % ;
/* Skalieren Sie das Bild auf 100 % Breite und 100 % Höhe */
Hintergrundwiederholung: keine Wiederholung;
Hintergrundanhang: behoben;
Marge: 0 ;
Polsterung: 0 ;
/* Optional: Fester Hintergrund */
}
Ausgabe
Dies ist die Ausgabe vor dem Verkleinern des Browserfensters:
Nach dem Zusammenziehen des Browsers:
Die obige Ausgabe bestätigt, dass das Bild den Hintergrund an die Bildschirmabmessungen angepasst hat.
Abschluss
Um Hintergrundbilder an die Bildschirmabmessungen anzupassen, fügen Sie zunächst das „ Ansichtsfenster ” im Kopfbereich, um Abmessungen und Skalierung zu steuern. Erstellen Sie dann eine HTML-Struktur und wenden Sie CSS an. Legen Sie in CSS das „ Hintergrundgröße „ Immobilienwert zum „ Abdeckung ”-Wert, um die Höhe und Breite eines Bildes zu skalieren. In diesem Artikel finden Sie eine vollständige Anleitung zum Anpassen von Hintergrundbildern an die Bildschirmabmessungen.