[CSS/HTML] Background image onderaan pagina zetten

[Verwijderd]

Beste Tweakers,

Ben op het moment bezig om een website online te zetten en heb het layout zo goed als helemaal online.
De pagina bestaat uit
-1 container-div waar alles in gepositioneerd staat. (container div is gecentered)
-1 schermvullende div (horizontaal) met dezelfde hoogte als de header om de header in over te doen lopen

De site is: http://www.dressuurstal-nijpjes.nl/
Wat ik niet voor elkaar krijg is om een horizontaal schermvullende achtergrond/div als footer te krijgen.
De huidige footer moet overlopen in de achtergrond. (bij het bekijken van de website zal het wel duidelijk zijn

Op het moment heb ik een body background image met de positie bottom:0;
Deze komt echter onderaan het scherm te staan ipv dat het mee rekt en onder aan de pagina komt te staan!

Ik heb gezocht, gezoch en geprobeerd...maar kom er niet uit!
Alle handleidingen om een footer onder de content te krijgen zijn doorgelezen...maar dit is net niet helemaal wat ik zoek!

Zijn er hier misschien mensen die me op weg kunnen helpen?
Bedankt alvast!

[Bosmonster]

Je kunt hier toch gewoon 3 gecentreerde achtergronden voor gebruiken? Header en footer met vaste hoogte en het midden op repeat-y.

[Borizz]

Verwijderd schreef op maandag 24 augustus 2009 @ 19:26:

Op het moment heb ik een body background image met de positie bottom:0;
Deze komt echter onderaan het scherm te staan ipv dat het mee rekt en onder aan de pagina komt te staan!

Je vertelt er dan weer niet bij dat je de body (en html) height op 100% hebt staan (wat inhoudt dat de hoogte van de body 100% is t.o.v. de viewport in standards compliance modus). Post eens het relevante gedeelte van je html / css code en leg uit waar het fout gaat. Op deze manier laat je niet echt zien dat je er zelf moeite voor hebt gedaan om het probleem op te lossen. Wellicht kan je even een simpele testcase kan maken waarin het probleem gedemonstreerd wordt.

Wat heb je zelf al geprobeerd om aan te passen in je html / css om het probleem op te lossen?

[Verwijderd]

Komtie:

code:

<div id="header">   <---is horizontaal schermvullend, even hoog als header, header loopt over in deze achtergrond
</div>
        <div id="Tabel_01">   <--- Container
            <div id="index-01">
            </div>
            <div id="boven-header">
            </div>
             <div id="boven-logo">
             </div>
             <div id="header-links">
             </div>
             <div id="logo">
             </div>
             <div id="header-foto">
             </div>
             <div id="header-rechts">
             </div>
             <div id="boven-content">
             </div>

    <div id="content">   <---Content container
                    <div id="content_wrapper">
                    </div>
                        <div id="push"></div>   <--Pushed de volgende div's iets naar beneden
                        <div id="onder-content">    <--Footer
                        <div id="footer">      <-- Footer
                        </div>
             </div>
            </div>
 </div>

En de bijbehorende CSS:

code:

html{
height: 100%;
}

body {
background-color:#D6CEC3;  <---Grijze achtergrondkleur voor rond content-gedeelte
width:100%;
height: 100%;
text-align: center;
margin-top: 0px; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 0px;
text-align: left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #47362E;
background-image:url(images/achtergrond.jpg); <--Oranje voor footer gedeelte
background-position: 100% 100%;
background-repeat: repeat-x;
}

#content_wrapper {           /*zorgt ervoor dat de tekst binnen de randen van content container blijft*/
color:#47362E;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
width:93%;
margin:0 auto;
}

#Tabel_01 {
    position:absolute;
    left:0px;
    top:0px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -199px; /* the bottom margin is the negative value of the footer's height */
    width:1070px;
    left:50%;
    top:52%;    
       margin-top: -400px; /* half of the height */
       margin-left: -535px; /* half of the width */
}

#header { /*beeldschermvullend horizontaal achtergrond voor header*/
    position:absolute;
    left:0px;
    top:0px;
        width:100%;
    height:273px;
    background-color:#47362E;
}

#index-01 {
    position:absolute;
    left:0px;
    top:0px;
    width:215px;
    height:12px;
        background-image:url(images/index_01.gif);
}

#boven-header {
    position:absolute;
    left:215px;
    top:10px;
    width:855px;
    height:59px;

}

#boven-logo {
    position:absolute;
    left:0px;
    top:12px;
    width:215px;
    height:45px;
        background-image:url(images/boven_logo.gif);
}

#header-links {
    position:absolute;
    left:0px;
    top:57px;
    width:39px;
    height:229px;
        background-image:url(images/header_links.gif);
}

#logo {
    position:absolute;
    left:39px;
    top:57px;
    width:176px;
    height:229px;
        background-image:url(images/logo.gif);
}

#header-foto {
    position:absolute;
    left:215px;
    top:65px;
    width:816px;
    height:229px;
}

#header-rechts {
    position:absolute;
    left:1031px;
    top:57px;
    width:39px;
    height:229px;
        background-image:url(images/header_rechts.gif);
}

#boven-content {
    position:absolute;
    left:0px;
    top:286px;
    width:1070px;
    height:30px;
        background-image:url(images/boven_content.gif);
}

#content {
    position:absolute;
    left:0px;
    top:316px;
    width:1070px;
        background-image:url(images/content.gif);
}

#push {
    height:20px;
}

#onder-content {
    position:absolute;
    left:0px;
    width:1070px;
    height:32px;
        background-image:url(images/onder_content.gif);
}

#footer {
    position:absolute;
    left:0px;
    width:1070px;
    height:199px;
        background-image:url(images/footer.gif);
}

[Verwijderd]

Bosmonster schreef op maandag 24 augustus 2009 @ 19:31:
Je kunt hier toch gewoon 3 gecentreerde achtergronden voor gebruiken? Header en footer met vaste hoogte en het midden op repeat-y.

Is het mogelijk om 3 achtergronden te gebruiken in je body tag?Kheb het zojuist geprobeerd...maar kreeg het niet voor elkaar. er wordt er maar een geladen.

Ik heb geprobeerd een div aan te maken in de main-container...dat lukt dan wel maar dan wordt de breedte van de main-container gebruikt ipv de schermbreedte.

[Helmet]

Verwijderd schreef op maandag 24 augustus 2009 @ 20:44:
[...]


Is het mogelijk om 3 achtergronden te gebruiken in je body tag?Kheb het zojuist geprobeerd...maar kreeg het niet voor elkaar. er wordt er maar een geladen.

Ik heb geprobeerd een div aan te maken in de main-container...dat lukt dan wel maar dan wordt de breedte van de main-container gebruikt ipv de schermbreedte.

Nee, dat is op het moment nog niet mogelijk (hoewel het volgens mij wel in de CSS3 Specificatie zit)

[Bosmonster]

Verwijderd schreef op maandag 24 augustus 2009 @ 20:44:
[...]


Is het mogelijk om 3 achtergronden te gebruiken in je body tag?Kheb het zojuist geprobeerd...maar kreeg het niet voor elkaar. er wordt er maar een geladen.

Ik heb geprobeerd een div aan te maken in de main-container...dat lukt dan wel maar dan wordt de breedte van de main-container gebruikt ipv de schermbreedte.

Nee gewoon 3 divs onder elkaar met die achtergrond... Eentje voor header, eentje voor content en eentje voor de footer.

[Verwijderd]

Bosmonster schreef op maandag 24 augustus 2009 @ 23:20:
[...]


Nee gewoon 3 divs onder elkaar met die achtergrond... Eentje voor header, eentje voor content en eentje voor de footer.

Ok...dus als ik het goed begrijp is het beter om 3 div's aan te maken die dienen als "container"
In de Div header - Komt alles wat nu ook als header dient
In de Div Content - Komt alles wat nu ook als content gedeelte dient
In de Div Footer - Komt alles wat nu ook als footer gedeelte dient

Ik moet dus afstappen van 1 div waar heel de site in staat?

Hierbij nog even de schets zoals het ernu uitziet...


Ik hoop dat het nu wat duidelijker is...

[Verwijderd]

Heb de oplossing van http://www.cssstickyfooter.com/ geprobeerd te gebruiken...maar hiermee verdwijnt de footer van het scherm. Krijg t met geen mogelijkheid weer terug.

[Verwijderd]

Zoiets?
http://www.guidohendriks....deraan%20pagina%20zetten/

(getest in Safari, Firefox en Chrome op Mac)

edit: inmiddels ook getest in IE7, ook goed

[ Voor 14% gewijzigd door Verwijderd op 25-08-2009 18:03 ]

[Verwijderd]

Verwijderd schreef op dinsdag 25 augustus 2009 @ 17:56:
Zoiets?
http://www.guidohendriks....deraan%20pagina%20zetten/

(getest in Safari, Firefox en Chrome op Mac)

edit: inmiddels ook getest in IE7, ook goed

Exactly! Dat is em! Super bedankt! Ik ga er mee aan de slag...