✔ 3 versch. Backgrounds - Browser Position: bottom

[foxx21]

Hallo Leute!

Ich habe folgende Aufgabe zu lösen:

Ich habe einen Hintergrund im body bg_main.gif.
Auch habe ich 2 Divs, welche zentriert positioniert sind. bgDIV & mainDiv

mainDiv liegt im bgDIV drin und beide haben die selben Breitenangaben von 800px.

Der bgDIV hat eine Hintergrundfarbe
Der mainDIV hat eine Hintergrundgrafik die immer ganz unten im Browserfenster angezeigt werden soll! Das tut sie aber leider nicht!

Wenn ich meinen mainDIV mit einigen Breaks fülle ist das kein Problem und die Seite wird schön nach unten verlängert. Wenn ich aber weniger Text habe, geht mein mainDIV nicht bis zum Browser Ende nach unten!

Mein CSS Code sieht folendermaßen aus:

html{
height:100%;
margin:0 auto;
padding:0px;
text-align:center;
font-family:Verdana;
font-size:0.75em;
color:#0d2982;
}


body {
height:100%;
margin:0 0 0 0;
width:100%;
background-image: url(images/bg_main.gif);
}


/*----------------------------------------------------------*/

#bgDiv{
margin:auto;

background-color:#3ea8fe;
width:800px;

border-left:solid 10px white;
border-right:solid 10px white;}

#mainDiv{
 outline:orange solid 4px;
 min-height:100%;
 margin:auto;
 width:800px;
 
 background: url(images/bg_content_wave.jpg) bottom no-repeat;
 background-position:bottom;
}

 

[Maik]

Hi,

ich empfehle dir, das Hintergrundbild im DIV #bgDIV einzusetzen, und dieses wie folgt zu formatieren:

#bgDiv{
margin:auto;
min-height:100%;
height:auto !important;
height:100%;
width:800px;
background:#3ea8fe url(images/bg_content_wave.jpg) bottom no-repeat;
border-left:solid 10px white;
border-right:solid 10px white;
}

Auf diese Weise befindet sich das Hintergrundbild zunächst am unteren Browserfensterrand und wandert nach unten, wenn der Inhalt zunimmt.

 

[foxx21]

Perfekt ich danke dir! Klappt einwandfrei!