Webdesign-Trends: Hintergrundbilder »Out of the Grid«

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!

2 Antworten

  1. Vielen Dank für diesen interessanten Artikel. Ich finde, dass solche Hintergründe gerade auf breiten Bildschirmen sehr schön aussehen. Dann wirkt der Teil ausserhalb des Inhalts nicht so leer. Kubis Website finde ich sowieso einfach toll :)
    Ich wünsche euch ein schönes Weekend!

  2. Hi!

    Ich bin ganz deiner Meinung!

    Eine Webseite sollte ein grafisches Gesamtkonzept bezogen auf die Art der Information die auf der Webseite angeboten wird sein.

    Der standardisierte Einheitsbrei mit ihren Menu-buttons mag für Portale und Shops genau das richtige sein. Für private Homepages wünscht man sich aber private, also aus der Reihe fallende Designs.

    Ich knuspere mir auch gerade wieder ein Design zusammen und bin auf der Suche nach Anregungen über deine Seite gestolpert.

    Vielen Dank dafür!

Schreibe einen Kommentar zu Barbara Antwort abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert