Es gibt im Webdesign etliche Möglichkeiten den Seitenhintergrund zu gestalten. Zur Zeit ist es ein großer Trend, Webseiten »Out of the Grid« zu gestalten, also aus dem eigent­li­chen Webseiten-Raster aus­zu­bre­chen.

Das kann man unter anderem errei­chen, indem man den Webseiten-Hintergrund außer­halb der eigent­li­chen Webseiten-Breite posi­tio­niert. Dabei ist es wichtig, dass das Hintergrundbild in die Hintergrundfarbe über­geht, da ansonsten auf großen Monitoren das Ende des Bildes sichtbar wäre.

Ein wun­der­schönes Beispiel für einen sol­chen Hintergrund ist das neue Design von Nick Las N.Design Studio.

Nick La hat seine Illustration als trans­pa­rente PNG-Datei gespei­chert, und lässt das Bild am Rand in den Hintergrund übergehen.

Auf der Webseite Kubis Welt haben wir eben­falls ver­sucht aus­ser­halb des Rasters zu gestalten, und eine helle Grunge-Struktur und Äste in den Hintergrund gelegt.

Um den Hintergrund noch etwas span­nender zu gestalten, kann man anstelle einer ein­fa­chen Hintergrundfarbe ein wei­teres Bild ein­fügen. Dieses kann z.B. eine leichte Struktur oder/und einen Verlauf sein.

Es recht dabei nur einen kleinen Ausschnitt des Verlaufs mit dem Slice-Werkzeug in Photoshop aus zu schneiden, und das Bild hori­zontal zu wiederholen.

Der CSS Code für einen sol­chen Hintergrund sieht so aus:

html {
	background: #000 url(images/verlauf.jpg) repeat-x;
}
body {
	padding: 0;
	margin: 0;
	background: url(images/hintergrund.jpg) no-repeat center top;
	width: 100%;
	display: table;
}

Weitere Beispiele für Webseiten-Hintergründe »Out of the Grid«

Curious Generation Group

New to York

Chirp

Kennst du noch mehr schöne Beispiele für Webseiten mit span­nenden Hintergründen? Schreibe mir doch ein­fach einen Kommentar, ich freue mich schon auf dein Feedback!