• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fullscreen Background Image & 100% height

M

mittererr

Neues Mitglied
Hallo Leute,

ich habe ein CSS Problem und hoffe hier Hilfe zu finden. Also folgende Situation:
Ein Layout mit Header, Content, Footer - nichts Besonderes:

HTML: 
        <div id="container">
            <div id="containerHeader">Header</div>
            <div id="containerContent">Content</div>
            <div id="containerFooter">Footer</div>
        </div>
HTML: 
#container {
    position: absolute;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 974px;
    left: 50%;
    margin-left: -487px;
}

#containerHeader {
    position: absolute;
    top: 0;
    width: 100%;
    height: 274px;
    background: url(../images1/bckgnd_header.png) no-repeat;
}

#containerContent {
    position: relative;
    width: 100%;
    margin: 274px 0 100px 0;
    background: url(../images1/bckgnd_content.png) repeat-y;
}

#containerFooter {
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    background: url(../images1/bckgnd_footer.png) no-repeat;
}
Dieses Konstrukt soll nun allerdings auf einem Fullscreen Background Image zu liegen kommen. Der Header der Content und der Footer haben jeweils ein teiltransparentes Background Image (!!). Das heißt das Fullscreenimage kommt teilweise durch.

Header und Footer haben eine fixe Höhe - da hab ich auch kein Problem. Der Footer soll immer ganz unten sein - auch keine Problem. Nur der Content soll mit seinem Hintergrundbild immer den restlichen Platz zwischen Header und Footer auffüllen - dynamisch, je nach Höhe. Die Hintergrundbilder von Header, Content und Footer dürfen sich dabei nicht überlappen, weil man das durch die Transparenz sieht!
Anbei ein Bild mit blauem Hintergrund. Die Hellblaue Leiste am linken Rand ist transparent!

Danke für Eure Hilfe

meinstand.jpg
 
Gib html und body auch noch eine Höhe und Breite von 100%.

Musst Du für sowas absolute Positionierung verwenden? Ich würde sagen nein.
 
OK - html und body auf 100% hatte ich schon, hab ich nur versehentlich nicht mitkopiert.

Die absolute Positionierung kann ich natürlich rausnehmen dann ordnen sich die divs alle schön aneinander - das will ich aber nur bedingt. Der Footer soll IMMER ganz unten sein! Der content soll dann den Space zwischen Header und Footer auffüllen.

Ich hoffe so ist das verständlich.
 
Also hier mal der gesamte CODE:

HTML:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Unbenanntes Dokument</title>
        <link rel="stylesheet" href="stylesht.css" type="text/css" />
    </head>
    <body>
        <!-- ###DOCUMENT### begin-->
        <div id="container">
            <div id="containerHeader">
                <div id="logobox">
                    ###LOGO###
                </div>
                <div id="traileranimation">
                    ###TRAILER###
                </div>
                <div id="mainmenu">
                    ###MAINMENU###
                </div>
            </div>
            <div id="containerContent">
                <div id="col1">
                    ###COL1###
                </div>
                <div id="col2">
                    ###COL2###
                </div>
                <div class="clear">
                </div>
            </div>
            <div id="containerFooter">
            </div>
        </div>
        <!-- ###DOCUMENT### end-->
    </body>
</html>
und CSS:
HTML: 
/* Textlinks formatieren */
a:link {
    color: #000099;
    text-decoration: none;
}

a:visited {
    text-decoration: none;
    color: #000099;
}

a:hover {
    text-decoration: none;
    color: #FF0000;
}

a:active {
    text-decoration: none;
    color: #FF0000;
}

a {
    outline: none;
}

/* ALIGN CLASSES */
.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

body, html {
    height: 100%;
}

body {
    margin: 0;
    background: #0078BE url(../images1/bckgnd_top.jpg) top repeat-x;
}

/* CONTAINER */
#container {
    position: absolute;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 974px;
    left: 50%;
    margin-left: -487px;
}

#containerHeader {
    top: 0;
    width: 100%;
    height: 274px;
    background: url(../images1/bckgnd_header.png) no-repeat;
}

#containerContent {
    width: 100%;
    margin: 0 0 100px 0;
    background: url(../images1/bckgnd_content.png) repeat-y;
}

#containerFooter {
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    background: url(../images1/bckgnd_footer.png) no-repeat;
}

/* HEADER */
#logobox {
    position: absolute;
    width: 260px;
    height: 120px;
    top: 70px;
    left: 60px;
}

#traileranimation {
    position: absolute;
    width: 560px;
    height: 219px;
    top: 29px;
    left: 380px;
    overflow: hidden;
}

#mainmenu {
    position: absolute;
    width: 919px;
    height: 26px;
    top: 248px;
    left: 24px;
    background: url(../images1/bckgnd_menu.jpg) no-repeat;
    padding-left: 30px;
    overflow: hidden;
}

/* CONTENT */
#col1, #col2 {
    position: relative;
    float: left;
    width: 60%;
    font: normal normal normal 13px / 1.25em 'PT Sans', Arial, Helvetica, sans-serif;
    color: #5C5B60;
    padding: 30px 5%;
}

#col2 {
    width: 20%;
}

#col1 h1, #col2 h1 {
    font: normal normal normal 21px / 1.5em 'PT Sans', Arial, Helvetica, sans-serif;
    color: #0078BE;
}

/* CLEAR */
.clear {
    width: 100%;
    clear: both;
}
 
Die Site hab ich gestern schon gefunden (daher auch die Ähnlichkeit :-)). Das ist leider auch nicht die Lösung - meine Hintergrundbilder sind teiltransparente png!! Anbei mal meine Hintergrundbilder . . .


bckgnd_footer.jpgbckgnd_header.jpgbckgnd_content.jpg
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben