Für meinen shop habe ich eine neue Theme-Reihe erstellt und gleich 5 neue Themes eingestellt. Weil ich meinem Grundsatz mit möglichst einfachen Mitteln ohne viel zusätzliche Erweiterungen, angepasste Templates oder externe Skripte einfach zu verwendende Themes erstellen möchte, stehe ich manchmal vor einem Problem, denn die Super-Effekte sind meist doch nur mit Hilfe von jQuery oder MooTools zu erreichen.
Aber ein kleines Highlight habe ich dennoch gefunden.
Big Pictures im Webseitenhintergrund. Es braucht auf einer Webseite manchmal nicht viel, wenn es schöne und sorgfältig ausgesuchte Bilder gibt. Die Macht der Bilder ist einfach unschlagbar, aber wie jetzt Bilder ohne die zusätzliche Erweiterung Background-Stretcher einbauen?
Mit CSS3 gibt es eine neue Auszeichnung: background-size. Stellt man hier den Wert auf cover, wird ein Hintergrundbild auf die Breite des Viewports proportional gestreckt. Das Unschöne daran ist aber, dass das Bild, bei langen Webseiten, natrülich irgendwann einmal endet und die normale Hintergrundfarbe zum Vorschein kommt. Nicht ganz so fein. Umgehen kann man das Ganze jedoch, indem man das gute alte background-attachment:fixed ins Spiel bringt.
Und weil der IE8 background-size:cover nicht versteht, fügt man für das Bild einfach
background-position: center top; hinzu. In den meisten Fällen muss man ja ein großes Hintergrundbild sowieso in größeren Abmessungen hinzufügen damit die Qualität nicht leidet. Deshalb kann man große Hintergrundbilder auch über background-position meist so positionieren, dass sie mittig hinter dem wrapper liegen. Beim IE8 schaut zwar dann zwar links und rechts Hintergrundfarbe von boy raus – aber mir persönlich macht es nichts aus, wenn es imIE8 halt nur ein Behelf ist.
