Hintergrundbild wird nicht repeated angezeigt

[delle77]

Moin moin,
mal wieder ein CSS-Problem zu dem ich keine konkrete Lösung hier finde.



Uploaded with

Wie im Bild zu sehen möchte ich hinter den eigentlichen Content einen Schlagschatten haben.

Hierfür habe ich ein Div (container_bg) angelegt mit 1000px Breite und 100% Höhe.

In dieses Div habe ich ein weiteres Div (container) B 900px x H 100% gepackt, in dem sich dann Header (B 900px x H 175px), Navi, (B 900px x H 30px) Content (B 900px x H auto) und Footer (B 900px x H 30px) befinden.

Header, Navi, Content und Footer besitzen jeweils ein transparentes BG-Image.

Wenn ich nun Container_BG eine feste Höhe zuweise ist das BG-Image mit dem Schlagschatten zu sehen. Wenn ich auto oder 100% einstelle ist das BG-Image wie auf der rechten Seite des Bildes zu sehen nicht mehr da.

Warum wird Container_bg nicht auf die Höhe des gesammten Inhaltes gezogen?

Danke für Eure Tips...

 

[cebito]

AW: Hintergrundbild wird nicht repeated angezeigt

Ein div mit einer Prozentangabe als Höhe braucht immer ein Elternelement mit einer definierten Höhe. Welches das ist, kann man hier nur sagen, wenn du mal ein bissl Quelltext postest.

 

[MatthiasM2D]

AW: Hintergrundbild wird nicht repeated angezeigt

Ich denke mal, das die inneren Boxen ein float besitzen und sich somit dem Textfluß entziehen. Somit umschließ deine äußere Box nicht mehr die inneren. Lange Rede kurzer Sinn Wer floatet muss auch clearen. Leg mal hinter deine inneren boxen ein div mit eigenschaft clear:both

Gruß

 

[delle77]

ei des wollt ich doch einfügen un hab wieder alles vergessen LOL

@charset "utf-8";

* {margin:0; padding:0 }
a img{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}


body {
background-image: url(../images/bg.jpg);
background-repeat: repeat;
}

#container_bg {
width:1000px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/bg_contentbox.png);
background-repeat: repeat-y;
height: 700px;
}
#container {
width:906px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
position: relative;
left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFF;
border-left-color: #FFF;
}

#header {
width:900px;
height:175px;
float: left; /* Opera 9+ */
margin-top: 0px;
margin-left: 0px;
background-image: url(../images/bg_header.png);
background-repeat: repeat;
}

#adresse {
float: right;
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
color: #FFF;
text-align: right;
text-transform: uppercase;
position: relative;
top: 75px;
margin-right: 10px;
}
#adresse a{
color: #FFF;
}
#adresse a:hover {
color: #666;
}



#logo {
height: 91px;
width: 204px;
background-image: url(../images/logo.png);
background-repeat: no-repeat;
position: absolute;
left: 40px;
top: 40px;
display: block;
}
#content {
width:840px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
text-align: left;
height: auto;
padding: 30px;
float: left; /* Opera 9+ */
color: #FFF;
margin-top: 0px;
margin-left: 0px;
}
#content h1{
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px; /* Opera 9+ */
color: #FFF;
margin-bottom: 20px;
text-transform: uppercase;
padding: 5px;
letter-spacing: 0.5em;
background-color: #646344;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}

.englisch {
color: #000;
font-style: italic;
font-size: 85%;
}
#footer {
font-size: 10px;
font-family: Tahoma, Geneva, sans-serif;
color: #333;
width: 880px;
float: left;
text-align: right;
height: 18px;
background-image: url(../images/bg_nav.png);
padding-right: 10px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#footer a:hover {
color: #FFF;
}
#footer a {
color: #999;

<div id="container_bg">
<div id="container">
<div id="header"></div><!-- end of header -->
<div id="nav"></div> <!-- end of nav -->
<div id="content"></div> <!-- end of content -->
<div id="footer"></div>
</div> <!-- enf of container -->
</div><!-- enf of container_bg -->

Ok,
hab die Floats bei allen Divs gelöscht, waren durch die 900px Breite gar nicht nötig.

Also ich werd's auf jeden Fall NIEMALS lernen was es mit Float und Clear und Co. auf sich hat.....schon zigmal gelesen, aber definitv zu dumm dafür

Das hat auf jeden Fall das Problem gelöst - vielen Dank für die Turbohilfe....

 

[Lobster1956]

AW: Hintergrundbild wird nicht repeated angezeigt

gefloatete divs sind für das Elternelement einfach nicht vorhanden...
erst wenn ein nachgeschaltetes Element ein entsprechendes clear hat "lernt" das Elternelement erst welche Höhe benötigt wird um alles zu umschließen...

einfach mal so umgangssprachlich versucht zu erklären...