Responsive Webdesign – Grundlagen

Hintergrundbilder im RWD

Testen Sie unsere 1984 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
An sich sind Hintergrundbilder flexibler als normale Bilder, weil sie beispielsweise bei Bedarf einfach abgeschnitten werden. Feinschliff wird möglich durch die CSS3-Eigenschaft background-size.

Transkript

An sich sind Hintergrundbilder flexibler als normale Bilder. Wenn nämlich das Element, dem das Hintergrundbild zugewiesen wird, kleiner ist als das Hintergrundbild selbst, wird das Hintergrundbild einfach abgeschnitten. Feinschliff ist jetzt aber möglich durch die CSS 3-Eigenschaft background-size. Ich habe jetzt hier einmal ein Beispiel vorbereitet, wo ich einem div-Element einen Kreis hier, ein Hintergrundbild zuweisen lasse. Schauen wir uns das mal kurz an. Und dann sehen Sie hier dieses Hintergrundbild wird zugewiesen. Das Hintergrundbild hat eine bestimmte Größe. Wir sehen es jetzt hier: es ist ein Kreis, bisschen abgeschnitten. Und was passiert, wenn jetzt das Browser-Fenster kleiner wird? Dann sehen Sie: sieht man einfach nur einen Ausschnitt aus dem Hintergrundbild. Das ist eine Option, die in vielen Fällen schon ganz wunderbar ist. Manchmal passt das aber nicht, weil irgendwelche Informationen auf dem Hintergrundbild sind, die man auch bei kleinerem Bildschirm auch noch sehen soll. Und dann gibt es Möglichkeiten hier mit background-size nachzubessern. Die erste Option, die wir haben, ist dass wir hier ein backround-size verwenden. Sie sehen hier die Angabe: 100% 100% Wenn wir das hier, das ist jetzt beim zweiten Element anfügen, dann sehen Sie: das Bild ist jetzt nicht mehr abgeschnitten, sondern ist gesamt da. Es kann aber sein, das sieht man schön, wenn man das Browser-Fenster ein bisschen größer macht, dass das Element dadurch verzerrt wird. Es kann in manchen Fällen nicht stören, es kann aber auch sehr störend sein. Und deswegen gibt es noch zwei weitere Möglichkeiten für background-size, die ich jetzt hier aufgeführt habe. Sie können bei background-size auch noch den Wert cover und contain einfügen. Schauen wir das auch mal an, was ist da der Unterschied. Muss es vielleicht ein bisschen komischer Größe machen, dass man es besser sieht. Also, bei der Variante contain wird das Hintergrundbild immer gesamt gezeigt. Aber eventuell ist natürlich auch Platz da ohne Hintergrundbild. Da machen wir deutlicher, wenn wir es so machen. Bei cover wird das Element ganz bedeckt durch das Hintergrundbild. Aber es kann auch sein, dass das Hintergrundbild abgeschnitten wird. Sie haben gesehen: ich habe diese Eigenschaft mit dem Präfix für webkit angegeben und keine anderen Präfixe angegeben. Das ist eine CSS 3-Eigenschaft und da gibt es ja häufig so, dass die für ältere Browser-Versionen mit diesen Präfixen angegeben werden muss. Schauen wir uns mal die Browser-Unterstützung an bei Can I Use. Mache ich das Browser-Fenster hier mal ein bisschen größer. Sie sehen, es ist, wenn wir hier im neuen Bereich sind, wunderbar grün. Internet Explorer funktioniert ab Version 9, der 8 kann es noch nicht. Da würde ich aber auch oft sagen, das ist jetzt eine kleine Verbesserung, wo man auch damit leben kann, dass der Internet Explorer 8 das nicht kann. Alternative wäre über Filter-Angaben nachzubessern. Aber das ist für die Performance schlecht. Und ist es nur ein kleiner Kreis von Nutzern, die Internet Explorer noch haben, solange es auch dort funktionsfähig ist, ist das glaube ich akzeptabel, wenn dieses spezielle Feature dort nicht ist. Andere Browser, sieht wunderbar grün aus. Sie sehen im Firefox in der Version 3.6, für den würden Sie noch das Präfix brauchen. Aber das ist wirklich lange lange her, das kann man heute ignorieren. Für einen Opera würden Sie das Präfix brauchen, wenn Sie die Version 10, 10.1 berücksichtigen wollen würden. Inzwischen gibt es den Opera mindestens in Version 15, der auf webkit basiert. Also, das ist viele Versionen zurück, das kann man auch ignorieren. Ausnahme ist, wo ich das Präfix hier gesetzt habe. Sie sehen hier Präfix webkit brauchen ältere Android-Versionen. Und deswegen ist es natürlich ganz sinnvoll das hier zu verwenden. Wie Sie gesehen haben, ist die Eigenschaft background-size praktisch, weil Sie damit die Größe von Hintergrundbildern definieren können. Und so können Sie beispielsweise sicherstellen, dass auch auf einem kleinen Bildschirm das Hintergrundbild nicht einfach abgeschnitten wird, sondern die wichtigsten Teile weiterhin zu sehen sind.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!