Sehen Sie sich heute beliebte Websites an und eine Designbehandlung, die Sie sicher sehen werden, sind große, bildschirmübergreifende Hintergrundbilder. Eine der Herausforderungen beim Hinzufügen dieser Bilder beruht auf der bewährten Vorgehensweise, dass Websites auf unterschiedliche Bildschirmgrößen und Geräte reagieren müssen - ein Ansatz, der als responsives Webdesign bezeichnet wird.
Da sich das Layout Ihrer Website ändert und mit unterschiedlichen Bildschirmgrößen skaliert, müssen auch diese Hintergrundbilder ihre Größe entsprechend skalieren. Tatsächlich sind diese "Flüssigkeitsbilder" eines der wichtigsten Elemente von responsiven Websites (zusammen mit einem Flüssigkeitsraster und Medienanfragen). Diese drei Elemente waren von Anfang an ein fester Bestandteil des responsiven Webdesigns, aber es war schon immer ziemlich einfach, responsive Inline-Bilder zu einer Site hinzuzufügen (Inline-Images sind die Grafiken, die als Teil des HTML-Markups codiert werden) Dasselbe gilt für Hintergrundbilder (die mithilfe von CSS-Hintergrundeigenschaften in die Seite eingefügt werden) und stellt viele Webdesigner und Front-End-Entwickler seit langem vor große Herausforderungen. Zum Glück ist dies durch das Hinzufügen der Eigenschaft "background-size" in CSS möglich geworden.
In einem separaten Artikel wurde die Verwendung der CSS3-Eigenschaft beschrieben Hintergrundgröße Um Bilder in ein Fenster zu strecken, gibt es eine noch bessere und nützlichere Methode für die Bereitstellung dieser Eigenschaft. Zu diesem Zweck verwenden wir die folgende Eigenschafts- und Wertekombination:
Hintergrundgröße: Cover;
Das Abdeckung Die Schlüsselworteigenschaft weist den Browser an, das Bild an das Fenster anzupassen, unabhängig davon, wie groß oder wie klein dieses Fenster wird. Das Bild wird so skaliert, dass es den gesamten Bildschirm abdeckt. Die ursprünglichen Proportionen und das Seitenverhältnis werden jedoch beibehalten, sodass das Bild selbst nicht verzerrt wird. Das Bild wird so groß wie möglich in das Fenster eingefügt, sodass die gesamte Fensterfläche bedeckt ist. Dies bedeutet, dass sich auf Ihrer Seite keine leeren Flecken oder Verzerrungen im Bild befinden, dass das Bild jedoch möglicherweise abgeschnitten wird, je nach dem Seitenverhältnis des Bildschirms und dem betreffenden Bild. Beispielsweise können die Ränder eines Bildes (entweder oben, unten, links oder rechts) für die Bilder abgeschnitten werden, je nachdem, welche Werte Sie für die Eigenschaft background-position verwenden. Wenn Sie den Hintergrund nach "oben links" ausrichten, werden alle Überstände im Bild unten und rechts angezeigt. Wenn Sie das Hintergrundbild zentrieren, wird der Überschuss von allen Seiten abgezogen. Da sich der Überschuss jedoch ausbreitet, ist der Einfluss auf eine der Seiten geringer.
Wie benutzt man Hintergrundgröße: Cover;
Wenn Sie ein Hintergrundbild erstellen, empfiehlt es sich, ein relativ großes Bild zu erstellen. Während Browser ein Bild verkleinern können, ohne die visuelle Qualität spürbar zu beeinträchtigen, wird die visuelle Qualität beeinträchtigt, wenn ein Browser ein Bild auf eine Größe vergrößert, die größer als seine ursprünglichen Abmessungen ist. Der Nachteil ist, dass Ihre Seite einen Leistungseinbruch erleidet, wenn Sie riesige Bilder an alle Bildschirme liefern. Wenn Sie dies tun, stellen Sie sicher, dass Sie diese Bilder ordnungsgemäß für die Download-Geschwindigkeit und die Webbereitstellung vorbereiten. Am Ende müssen Sie das glückliche Medium zwischen einer ausreichend großen Bildgröße und -qualität und einer angemessenen Dateigröße für die Downloadgeschwindigkeit finden.
Die Skalierung von Hintergrundbildern kann häufig verwendet werden, wenn das Bild den gesamten Hintergrund einer Seite einnehmen soll, unabhängig davon, ob diese Seite breit ist und auf einem Desktop-Computer angezeigt wird oder viel kleiner ist und an ein mobiles Handheld gesendet wird Geräte.
Laden Sie Ihr Bild auf Ihren Webhost hoch und fügen Sie es als Hintergrundbild Ihrem CSS hinzu:
Hintergrundbild: URL (Fireworks-over-wdw.jpg);Hintergrundwiederholung: keine Wiederholung;Hintergrundposition: Mitte Mitte;Hintergrundbefestigung: feststehend;
Fügen Sie zunächst das Browser-Prefix-CSS hinzu:
-webkit-background-size: cover;-moz-background-size: cover;-o-Hintergrundgröße: Abdeckung;
Fügen Sie dann die CSS-Eigenschaft hinzu:
Hintergrundgröße: Cover;
Verwenden verschiedener Bilder, die für verschiedene Geräte geeignet sind
Das ansprechende Design für einen Desktop oder ein Laptop ist zwar wichtig, die Vielfalt der Geräte, die auf das Web zugreifen können, ist jedoch erheblich gewachsen. Damit ist eine größere Vielfalt an Bildschirmgrößen verbunden.
Wie bereits erwähnt, ist das Laden eines sehr großen Hintergrundbildes auf einem Smartphone beispielsweise kein effizientes oder bandbreitenbewusstes Design.
Erfahren Sie, wie Sie Medienabfragen verwenden können, um Bilder bereitzustellen, die für die Geräte geeignet sind, auf denen sie angezeigt werden, und die Kompatibilität Ihrer Website mit mobilen Geräten weiter verbessern.
