Die Möglichkeiten Images über den Hintergrund einzubinden werden oftmals unterschätzt oder sind schlichtweg gar nicht bekannt. Dieses kleine Workaround zeigt anhand von ein paar praktischen Beispielen wie es und was da geht…
Background-Images haben gegenüber “normalen” Bildern eine Menge Vorteile. Ich gehe sogar so weit zu behaupten, dass man auf Img-Tags weitestgehend verzichten und alle Bilder, die zum Layout und nicht zum Inhalt einer Internetseite gehören, als Background einbinden sollte.
Die Vorteile der Hintergrundgrafiken liegen auf der Hand:
- Man hat volle Kontrolle über die Platzierung innerhalb eines Containers.
- Hintergrundbilder nehmen sich nur den zugeteilten Platz (sie besitzen keine eigene, feste Größe).
- Man kann sie über CSS ansteuern und somit auch z. B. ausschalten.
- Sie tauchen im Markup gar nicht erst auf.
Viele scheuen jedoch den Einsatz von Hintergrundgrafiken zum Einen aus Bequemlichkeit zum Anderen aus Unwissenheit. Natürlich ist ein Img-Tag schneller erstellt und im Container eingebunden, machen es einem doch die WYSIWYG-Editoren diesbezüglich sehr einfach. Doch betrachtet man den “background”-Tag einmal genauer, wird das kinderleichte “Handling” sofort klar:
background: #fff url(../images/grafik.gif) no-repeat 10px 40px;
Im oben aufgeführten Beispiel sehen wir die Formatierung eines Hintergrundes über die kurzschreibweise eines Background-Tags. Zuerst wird eine Hintergrundfarbe angegeben, die überall dort erscheint, wo kein Bild ist. Danach die URL, die ein Bild aufruft. Da das Hintergrundbild sich nicht wiederholen soll wird es auf “no-repeat” gesetzt. Weitere Möglichkeiten wären hier repeat-x (waagerechte Wiederholung) und repeat-y (senkrechte Wiederholung). Dann kommen die Angaben zur Positionierung innerhalb des umgebenen Containers. Der erste Wert für den Abstand zum linken, der zweite zum oberen Rand. Es gelten die gleichen Einheiten, die in CSS üblich sind (px, em, %).
Mit diesen Informationen kann man eigentlich schon Allerhand anstellen.
Schauen wir uns zum Schluss noch mal 3 Beispiele zur Positionierung von Hintergrundbildern zur Verdeutlichung des Sachverhalts an. Die Beispiele kann man sich hier auch zu Studienzwecken herunterladen.
Background Examples Downloads: 148
