| (Kommentare: 4)

Webdesign Lohmann | modern webdesign - Skalierbarer Hintergrund mit CSS

Formatfüllende Hintergrundbilder und moderne Browser sind natürliche Feinde. Nur selten gelingt die perfekte Positionierung der Bilder und wenn, kommen gängige Methoden nicht ohne Flash oder JavaScript aus. Mit ein paar Zeilen CSS gelingt jedoch die verblüffend einfache Illusion des perfekten Hintergrundbildes.

In diesem Tutorial zeige ich wie, man einen skalierbaren Hintergrund in eine Webseite einbinden.

Wie es sich für echte Illusionen gehört, ist der Effekt beeindruckend und der Trick banal. Allen Anfang bildet ein Hintergrundbild, dass später dynamisch um einige Prozent hochskaliert wird. In Hinsicht auf aktuelle Auflösungen habe ich Motiv mit der Größe von 1000 x 750 Pixeln gewählt. Die DPI des Bildes sollten größer als 150 DPI sein (hier sollte man einen Kompromiss zwischen Bildqualität und Dateigröße wählen), damit das Hintergrundbild beim Skalieren nicht zu stark pixelt.

Das Hintergrundbild

Für den Effekt des dynamischen Hintergrundbildes wird das gewählte Motiv als ganz normales Bild eingefügt und von einem Div-Element umrahmt.

<div id="bg"><img alt="background" src="gfx/nature.jpg" /></div>

Die eigentliche Hexenküche verbirgt sich im CSS. Zunächst werden alle Elemente mit Ausnahme des Hintergrundbildes auf maximale Höhe und Breite gebracht. Ebenfalls muss der Überlauf der Elemente verborgen werden, da sonst unschöne weiße Bereiche zu sehen sind und Scrollbalken eingeblendet werden.

html,
body,
#content {
	width:100%;
	height:100%;
	overflow:hidden;
}

Einmal die Konstanten hergestellt, muss nur noch das Bild auf die richtige Größe und Position gebracht werden.

#bg {
    position:absolute;
    width:100%;
    height:100%;
}


#bg img {
	min-height:100%;
	height:auto !important;
	height:100%;
	min-width:100%;
	width:auto !important;
	width:100%;
	margin:0 auto;
	display:block;
	position:absolute;
	bottom:0;
	right:0;
}

Im letzen Schritt der großen Formatierung wird nun endlich das Hintergrundbild positioniert und skaliert. Als Block-Element nimmt das Bild automatisch die vollständige Breite ein und kann als schönes Hintergrundbild brillieren.

Kurz und Knapp: Das Bild wird immer auf die vollständige Breite des Browserfensters skaliert. Es wird automatisch zentriert und kann bei falschen Proportionen in einen umlaufenden Rahmen ausweichen.

Der Inhalt über dem Bild

Das Bild ist perfekt, aber immer noch ein normales Bild und nicht im Hintergrund. In einem weiteren Div-Element wird der Inhalt der Webseite absolut links oben positioniert. Anschließend muss nur noch der Seiteninhalt mit dem z-index vor das Hintergrundbild geholt werden.

#content {
	position:absolute;
	top:0;
	left:13px;
	z-index:70;
	overflow:auto;
	padding:50px;
}

Fertig! Das nicht ganz gewöhnliche Hintergrundbild ist voll XHTML 1.0 Strict und CSS level 2.1 valide. Mit Ausnahme von minimalen Abweichungen im Bereich von einigen Pixeln stellt jeder aktuelle Browser die selbstskalierende Grafik korrekt dar.


Kommentare lesen

jb

Wer hat da jetzt von wem abegschrieben? ;-)

http://www.drweb.de/magazin/hintergrundbilder-eindrucksvoll-mit-css-skalieren/

Michael Lohmann

Der Orginal-Artikel stammt von Adrian Bechtold und wurde bei drweb.de veröffentlicht. In Absprache mit Adrian Bechtold durfte ich den Artikel übernehmen, erweitern und verändern. Die Lösungswege der beiden Artikel unterscheiden sich deutlich. Adrian Bechtold's Lösungsweg beruht auf der Verwendung von Tabellen, um ein Hintergrundbild bildschirmfüllend zu skalieren. Mein Lösungsweg hingegen nutzt nur ein in einem DIV-Tag umschlossenes <IMG>. Welcher Weg für euch nun der bessere ist, müßt Ihr selbst entscheiden.

Felix Schuh

Top erklärt Michael !
Den Artikel von dem benannten Adrian Bechtold hab ich nicht gefunden. Deinen aber schon. Dafür danke ich dir.

Gruß,
Felix

Dimi

Hallo,
vielen Dank für das Aufzeigen eines alternativen Weges!!!

Gibt es auch ein Anschauungsbeispiel?

Grüße
Dimi

Jürg

Wer hat den Text denn nun bei wem geklaut?
http://www.drweb.de/magazin/hintergrundbilder-eindrucksvoll-mit-css-skalieren/

Michael Lohmann

@ Jürg

die Antwort steht schon in den Kommentaren vom 29.06.2011


Einen Kommentar schreiben

Bitte rechnen Sie 5 plus 8.

Zurück