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 eigentlichen Webseiten-Raster auszubrechen.

Das kann man unter anderem erreichen, indem man den Webseiten-Hintergrund außerhalb der eigentlichen Webseiten-Breite positioniert. Dabei ist es wichtig, dass das Hintergrundbild in die Hintergrundfarbe übergeht, da ansonsten auf großen Monitoren das Ende des Bildes sichtbar wäre.

Ein wunderschönes Beispiel für einen solchen Hintergrund ist das neue Design von Nick Las N.Design Studio.

webdesign trends hintergrund ausserhalb des grids

Nick La hat seine Illustration als transparente PNG-Datei gespeichert, und lässt das Bild am Rand in den Hintergrund übergehen.

Auf der Webseite Kubis Welt haben wir ebenfalls versucht ausserhalb des Rasters zu gestalten, und eine helle Grunge-Struktur und Äste in den Hintergrund gelegt.

webdesign trends hintergrund ausserhalb des grids
webdesign trends hintergrund ausserhalb des grids

Um den Hintergrund noch etwas spannender zu gestalten, kann man anstelle einer einfachen Hintergrundfarbe ein weiteres Bild einfügen. Dieses kann z.B. eine leichte Struktur oder/und einen Verlauf sein.

webdesign trends hintergrund ausserhalb des grids

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

Der CSS Code für einen solchen Hintergrund sieht so aus:

[php]
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;
}

[/php]

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

Curious Generation Group

webdesign trends hintergrund ausserhalb des grids

New to York

webdesign trends hintergrund ausserhalb des grids

Chirp

webdesign trends hintergrund ausserhalb des grids

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