Schatten im Hintergrund

firewoman · 09.02.2009

Hallo

hab mal wieder eine Frage zum Webdesign.
Und zwar möchte ich einen Schatten im Hintergrund meiner Div Box haben.
Wie zum Beispiel hier

Wie funktioniert denn so was? Ich denke mit einer Hintergrundgrafik.
Könnte mir jemand erklären wie man so etwas macht?

Vielen Dank Firewoman

Herr_D · 09.02.2009

AW: Schatten im Hintergrund

Welchen Schatten meinst du? Den Schein nach außen neben dem Weißen und so?

Das regeln die über ein Backgroundimage

Der BG ist mittig/ topp per css positioniert und wiederholt sich nach unten...

gugge ma

CSS

Code:

<style type="text/css">
<!--
* {margin:0; padding:0; }
p {margin-left:1em; }
h1 {margin-bottom:1em;  }

body {
background-color:#DEDEDE; /* Hintergrundfarbe aussen BG */
background-image: url(xpu/bg_mspce.jpg); /* Adresse BG */
background-position:top center; /* Anordnung oben mittig */
background-repeat:repeat-y; /* Wiederholung nach unten */
color:#000; /* Schriftfarbe */
-->
</style>

Der Rest der Seite muß natürlich so angeordnet sein, dass es paßt (per CSS)

DJND · 09.02.2009

AW: Schatten im Hintergrund

Das machst Du mit der Software, mit der Du Deine Grafik erstellst, z.B. mit Photoshop. Dann definierst Du dort einen Schalgschatten und schon hast Du Deinen gewünschten Effekt.

firewoman · 09.02.2009

AW: Schatten im Hintergrund

hmmm,

schaut euch mal meine Page an, dort habe ich ja schon einen BG definiert.
Wie soll ich dann noch einen hinzufügen???
Oder muss ich da noch ein DIV einfügen?

p.s. dies ist meine erste Seite und fertig ist sie auch noch nicht.

MFG

Herr_D · 09.02.2009

AW: Schatten im Hintergrund

Du baust einen Hintergrund für den Inhaltspart... den du horizontal wiederholst...

wenn du jetzt einen schatten haben willst, mußt du entweder dem body einen Hintergrund zuordnen oder um den Inhaltsdiv noch einen wrapper machen mit Schatten...

etwa so:

Code:

<body class="oneColFixCtrHdr">
[COLOR="DarkGreen"]<div id="schatten">[/COLOR]
    <div id="container">
...

</div>
[COLOR="DarkGreen"]</div>[/COLOR]
<body>
</html>

Das grüne ist neu

und im css baust du den noch ein:

Code:

    .oneColFixCtrHdr #schatten{
	width: 820px; /* Breite so breit wie Schattenbild */
        background-image:url(schattenbild.jpg);
        background-position:top center; /* Anordnung oben mittig */
        background-repeat:repeat-y; /* Wiederholung nach unten */
       
}

Das Hintergrundbild mußt du dir noch erstellen (den Seitenhintergrund mußt du da wohl mit einarbeiten