l'image du contenu de fond doit coller au fond

Question

J'essaie de pousser mon image de fond de contenu et la faire coller au fond de ma page. L'image n'est PAS un pied de page car l'image sera derrière une partie du contenu. Mais l'image ne devrait pas être coupée en haut quand il y a peu de contenu et devrait coller au fond quand il y a beaucoup de contenu!

Rien ne fonctionne encore. Quelqu'un at-il des conseils pour moi?

Voici deux exemples. L'un avec du contenu adapté à la fenêtre et l'autre avec beaucoup plus de contenu.

Voici deux liens;

http://www.andrewa.org/testing/mosaik-test/content-imagebottom-test.html

http://www.andrewa.org/testing/mosaik-test/content-imagebottom-test2.html

Nous vous remercions d'avance dans les gens!

Answer 1

je mettrais l'image en arrière-plan à l'body en utilisant background-attachment: fixed; et ajouter:

html, body { 
    height: 100%; 
} 

Ainsi, le total serait:

html, body { 
    height: 100%; 
} 
body { 
    background-image: url("images/bg_content.gif"); 
    background-position: center bottom; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
} 

Answer 2

Appliquer l'arrière-plan sur votre emballage et mis l'arrière-plan -position au fond comme vous l'avez fait. L'astuce consiste à définir une hauteur minimale sur votre wrapper qui est la même hauteur que votre image d'arrière-plan. Cela permettra de résoudre le problème de ne pas assez de contenu tout en continuant à grandir avec la page quand il y a beaucoup de contenu.

Answer 3

Je crois que votre problème est double. D'abord, vous avez une hauteur définie pour votre div # content-image. Supprimez cette hauteur. Deuxièmement, parce que votre contenu dans cette div est flotté, vous devez effacer le flottant sur la div # content-image. quelque chose comme: "débordement: caché, effacer: les deux"

Essayez-le.

Answer 4

Un pied collant et un fond collant en un. Prenez la hauteur de votre image d'arrière-plan en tant que hauteur de votre pied de page et déterminez quelle partie de l'image doit être chevauchée par votre contenu. Pour laisser le pied collant "disparaître", utilisez le même nombre dans le bas de la marge principale que vous avez pour la hauteur du bas de page. Ceci est une conception modérée de la conception originale de pied de page collant de: http://www.webcreationz.nl/de-ultieme-sticky-footer-code (désolé site est en néerlandais).

Je viens de comprendre cela. J'espère que ça va aider quelqu'un.

HTML:

<div id="container"> 

    <div id="main">text of your website</div> 

    <div id="spacer"></div> 

</div> 

<div id="footer"></div> 

CSS:

html, body { 
    height: 100%; 
} 


#container { 
width: auto; /* with number center with margin: 0 auto;*/ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin-bottom: -175px; /* height footer */ 
} 

#main { 
    height: auto; 
    width: 618px; 
    float: right; 
    margin-top: 10px; 
    padding: 20px; 
    background-color: #FFF; 
    border: 1px solid #E1E4EC; 
    margin-bottom: -100px; /* overlap of 100 px into footer */ 

} 

#spacer { 
    display: block !important; 
    height: 175px; /* height footer */ 
} 

#footer { 
    clear: both; 
    height: 175px; /* height footer */ 
    width: auto; /* with number center with margin: 0 auto;*/ 
    background-image: url("images/plaatje jpg"; /* background picture */ 
    background-repeat: no-repeat; 
    background-position: center bottom; 
}