Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


Hintergrund

Farbe, Bild oder beides

background-color oder background-image: Alle HTML-Elemente können 2 verschiedene Arten Hintergrund haben: Farben und Bilder oder beides kombiniert. Das Kombinieren funktioniert aber nur, wenn das Bild, welches immer über der Farbe liegt, transparente Stellen aufweist, wie die Sterne im Beispiel, wie im Beispiel hier das Umfeld der Sterne.

0

Repetition

background-repeat: CSS-Hintergrundbilder werden standardmässig endlos repetiert. Ein Hintergrundbild ist also so viele male sichtbar, wie sein Element Platz bietet. Das Bild wird bei einer Grössenveränderung seines Elements nicht mitskaliert.

0

Positionierung mit Begriffen

background-position: Ein Hintergrundbild kann mit den einem oder zwei der folgenden Werte positioniert werden: top, bottom, left, right, center

0

Positionierung mit Werten
(und Begriffen)

Das selbe funktioniert auch mit festen Werten in Pixeln oder Prozenten, wobei der erste angegebene Wert immer für die x-Achse, also die Horizontale von rechts nach links steht. Der Zweite Werte definiert die den Abstand von oben nach unten, also die y-Achse. Begriffe wie «top» und Massangaben lassen sich auch mischen. Auch Minus-Werte sind erlaubt. Hier ein paar Muster:

0

Hintergrundgrösse

Mit background-size gibts theoretisch interessante Möglichkeiten, Hintergrundbilder zu skalieren, wie Heri Setiawans Muster auf Codepen zeigt. Das wäre vorallem für flexible Layouts sehr praktisch. Leider sind alle Eigenschaften in Internet Explorer < 9 völlig unbrauchbar. Für alte IE-Versionen lässt sich jedoch wenigstens cover mit einem CSS-Filter ergänzen, der das selbe Bild frisch berechnet und «einfach darüber legt». Hintergrundbilder mit transparenten Stellen sind hier deshalb denkbar ungünstig, weil dann das eigentliche Hintergrundbild, welches eben nicht richtig funktioniert, auch noch sichtbar ist. Daher empfehle ich, für Hintergrundskalierungen eines dieser jQuery-Plugins zu verwenden.

«Cover» skaliert das Hintergrundbild, so dass sicher immer die ganze Fläche gedeckt ist. Im Beispiel hier ist das Hintergrundbild eigentlich zu gross. Skalier das Browserfenster, damit du den Unterschied besser erkennst.

0

Scrollverhalten

background-attachment: legt fest, ob ein Hintergrundbild beim Scrollen stehen bleibt oder mitgeht.

0

Angewandt auf ein Blockelement lässt sich daraus nachfolgendes Verhalten «zaubern».

0


Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.