✔ Vertikaler Background über ganzen Bildschirm

[emonem]

Hi,

ich habe ein Problem mit meinem CSS Layout.
Die HP soll so aussehen: -link-
Ich habe eine Backgroundgrafik die horizontal sowie vertikal über dem Bildschirm verläuft.
Der Content ist ein Flash Film und dieser soll genau mittig auf dem Bildschirm ausgerichtet sein.
Habe jetzt mein HTML Code in drei Blöcke unterteilt: top,middle,bottom und dort die
elemente Plaziert.
Der middle container hat eine feste höhe und soll mittig ausgerichtet sein.
Soweit geht alles aber wie schaffe ich es das der vertikale Background im top sowie bottom container
sich dynamisch der Browserfenstergröße anpaßt.
Ich habe mal zur Veranschaulichung feste px Werte in den height Attributen eingetragen.
So siehts momentan aus: -link-
Wie ihr seht paßt es sich nicht exakt an.

Hier der HTML Code:

<div id="container">
  <div id="top">
    <div id="topcontainer"></div>
  </div>
  <div id="middle">
    <div id="content"></div>
  </div>
  <div id="bottom">
    <div id="bottomcontainer"></div>
  </div>
</div>

Hier mein CSS:

* {
margin:0px;
padding:0px;
}

html, body {
margin:0;
padding:0;
height:100%;
}

#container {
height:100%;
width:100%;
}

#top {
width:100%;
height:100px;
}

#topcontainer {
position:absolute;
left:50%;
margin-left:1px;
background:url(_images/vertical.gif) repeat-y;
width:396px;
height:100px;
}

#middle {
width:100%;
height:505px;
background: url(_images/middlebg.gif) repeat-x;
}

#content {
margin:0 auto;
background: url(_images/content.jpg) no-repeat;
width:799px;
height:505px;
}

#bottom {
width:100%;
}

#bottomcontainer {
position:absolute;
left:50%;
margin-left:1px;
background:url(_images/vertical.gif) repeat-y;
width:396px;
height:100px;
}

Hat jemand ein Tip für mich wie ich das Problem lösen kann das sich der vertikale Bg dynamisch an die jeweiligen Bildschirmauflösung anpaßt?

 

[emonem]

Ok,

hab jetzt das Ding umgestellt.

Ich habe ein div (container) erstellt. In diesem ist der Vertikalen Bg eingetragen und dem die notwendigen Attribute gegeben.

Ok, der Vertikale Bg verläuft jetzt 100% über dem Bildschirm und der Flashcontent wird
genau mittig plaziert.

Aber wie schaffe ich es denn jetzt das der horizontalen Bg im Body für jede Fenstergröße zentriert verläuft? Also exakt durch den späteren Flashfilm.
Mit repeat-x 0 100px habe ich den Bg momentan fix plaziert.
So siehts aus: -link-


HTML:

<div id="container">
 <div id="content"></div>
</div>

CSS:

* {
margin:0px;
padding:0px;
}

html, body {
height:100%;
background: url(_images/middlebg.gif)  repeat-x 0 100px ;
}

#container {
margin:0 auto;
min-height:100%;
background:url(_images/vertical.gif) repeat-y right top;
width:799px;
}

#content {
position:absolute;
top:50%;
margin-top:-252px;
background: url(_images/content.jpg) no-repeat;
width:799px;
height:505px;
}

Danke und Gruß

 

[emonem]

Ok,

hat sich schon erledigt.