Schauen 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 ergibt sich aus der bewährten Vorgehensweise, dass Websites auf unterschiedliche Bildschirmgrößen und Geräte reagieren müssen – ein Ansatz, der als. bekannt ist sich anpassendes Webdesign.
Ein Bild für viele Bildschirme
Da sich das Layout Ihrer Website mit unterschiedlichen Bildschirmgrößen ändert und skaliert, müssen auch diese Hintergrundbilder ihre Größe entsprechend skalieren. Tatsächlich sind diese "flüssigen Bilder" (zusammen mit einem fließenden Raster und Medienabfragen) eines der Schlüsselelemente responsiver Websites. Diese drei Elemente waren von Anfang an ein fester Bestandteil des responsiven Webdesigns, aber obwohl es immer ziemlich einfach war, responsive hinzuzufügen Inline-Bilder zu einer Site (Inline-Bilder sind die Grafiken, die als Teil des HTML-Markups codiert sind), dasselbe mit Hintergrundbildern (was werden mithilfe von CSS-Hintergrundeigenschaften in die Seite gestylt) hat viele Webdesigner und Frontends lange vor große Herausforderungen gestellt Entwickler. Glücklicherweise hat das Hinzufügen der Eigenschaft "background-size" in CSS dies möglich gemacht.
In einem separaten Artikel haben wir die Verwendung der CSS3-Eigenschaft background-size um Bilder so zu dehnen, dass sie in ein Fenster passen, aber es gibt eine noch bessere und nützlichere Möglichkeit, diese Eigenschaft bereitzustellen. Dazu verwenden wir die folgende Kombination aus Eigenschaft und Wert:
Hintergrundgröße: Cover;
Die Schlüsselworteigenschaft cover weist den Browser an, das Bild so zu skalieren, dass es in das Fenster passt, unabhängig davon, wie groß oder klein das Fenster wird. Das Bild wird so skaliert, dass es den gesamten Bildschirm abdeckt, aber die ursprünglichen Proportionen und das Seitenverhältnis bleiben erhalten, sodass das Bild selbst nicht verzerrt wird. Das Bild wird möglichst groß im Fenster platziert, damit die gesamte Fensterfläche abgedeckt wird. Dies bedeutet, dass Sie keine leeren Stellen auf Ihrer Seite oder keine Verzerrung im Bild haben, aber es ist auch bedeutet, dass ein Teil des Bildes je nach Seitenverhältnis des Bildschirms und des Bildes abgeschnitten werden kann Frage. Beispielsweise können die Kanten eines Bilds (oben, unten, links oder rechts) auf den Bildern abgeschnitten werden, je nachdem, welche Werte Sie für die Eigenschaft background-position verwenden. Wenn Sie den Hintergrund nach "oben links" ausrichten, wird jeglicher Überschuss des Bildes von der unteren und rechten Seite abgelöst. Wenn Sie das Hintergrundbild zentrieren, wird der Überschuss von allen Seiten abgelöst, aber da dieser Überschuss verteilt wird, ist die Wirkung auf einer Seite geringer.
So verwenden Sie 'background-size: cover;'
Wenn Sie Ihr Hintergrundbild erstellen, ist es eine gute Idee, ein ziemlich großes Bild zu erstellen. Während Browser ein Bild verkleinern können, ohne die visuelle Qualität merklich zu beeinträchtigen, wird beim Skalieren eines Browsers Bild auf eine Größe größer als seine Originalmaße, wird die visuelle Qualität verschlechtert, wird verschwommen und verpixelt. Der Nachteil dabei ist, dass Ihre Seite einen Leistungseinbruch erleidet, wenn Sie riesige Bilder auf allen Bildschirmen bereitstellen. Wenn Sie dies tun, stellen Sie sicher, dass Sie richtig Bereiten Sie diese Bilder für Download-Geschwindigkeit und Web-Bereitstellung vor. Am Ende müssen Sie das glückliche Mittel zwischen einer ausreichend großen Bildgröße und -qualität und einer angemessenen Dateigröße für Download-Geschwindigkeiten finden.
Eine der gebräuchlichsten Methoden zum Skalieren von Hintergrundbildern besteht darin, dass dieses Bild den gesamten Hintergrund einer Seite einnehmen soll. ob diese Seite breit ist und auf einem Desktop-Computer angezeigt wird oder viel kleiner ist und an ein Handheld oder Mobilgerät gesendet wird Geräte.
Laden Sie Ihr Bild auf Ihren Webhost hoch und fügen Sie es als Hintergrundbild zu Ihrem CSS hinzu:
Hintergrundbild: URL (fireworks-over-wdw.jpg);
Hintergrundwiederholung: keine Wiederholung;
Hintergrund-Position: Mitte Mitte;
Hintergrundanhang: behoben;
Fügen Sie zuerst das CSS mit dem Browser-Präfix hinzu:
-Webkit-Hintergrundgröße: Cover;
-moz-Hintergrundgröße: Abdeckung;
-o-Hintergrundgröße: Abdeckung;
Fügen Sie dann die CSS-Eigenschaft hinzu:
Hintergrundgröße: Cover;
Verwenden verschiedener Bilder, die zu unterschiedlichen Geräten passen
Während Responsive Design für ein Desktop- oder Laptop-Erlebnis wichtig ist, ist die Vielfalt der Geräte die auf das Internet zugreifen können, ist erheblich gewachsen, und eine größere Vielfalt an Bildschirmgrößen ist damit verbunden Das.
Wie bereits erwähnt, ist das Laden eines sehr großen responsiven Hintergrundbilds beispielsweise auf einem Smartphone kein effizientes oder bandbreitenbewusstes Design.
Erfahren Sie, wie Sie verwenden können Medien-Anfragen um Bilder bereitzustellen, die für die Geräte geeignet sind, auf denen sie angezeigt werden, und um die Kompatibilität Ihrer Website mit mobilen Geräten weiter zu verbessern.