Hintergrund mit
Rahmen & Verlauf
Hier wird einem Div ein background zugewiesen, der 2 Hintergrundbilder und einen Verlauf enthält. Die beiden Bilder bilden den Rand. Sie werden mit repeat-y und den Position left und right positioniert.
Desweiteren wird ein linearer Verlauf zugewiesen. Hier fehlen allerdings noch die Browserpräfixe.
Eine Möglichkeit auf die Präfixe zu verzichten, ist Lea Verous Javascript Datei zu implementieren.
Das habe ich hier gemacht.
Alles weitere kann man meinen beiden CSS3 Tipp Hintergrund entnehmen:
Der CSS Code für den Hintergrund und Schatten:
background: url(img/ornament1.gif) left top repeat-y, url(img/ornament2.gif) right top repeat-y, linear-gradient(90deg, #ecce9c, #dfa773, #ecce9c);
box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.58);
Auch die Reihenfolge ist wichtig, denn wenn der Verlauf über den Rändern liegt, kann man die Ränder nicht sehen. Das bedeutet, dass der Verlauf als letztes zugewiesen wird, denn die letzten werden die ersten sein. In diesem Fall das erste was in der Reihenfolge der Hintergründe angezeigt wird.
Auch der body hat hier 2 Hintergrundbilder bekommen, denen wurde zusätzlich noch der Wert fixed zugewiesen, damit der Rand fixiert bleibt, wenn die Seite gescrollt wird. Dadurch entsteht der Eindruck als würde nur der innere Block gescrollt und der eigentliche Seitenhintergrund wäre fest fixiert.
