Липкий нижний колонтитул и липкий фон в одном. Возьмите высоту вашего фонового изображения в качестве высоты нижнего колонтитула и определите, какая часть изображения должна перекрываться вашим контентом. Чтобы липкий нижний колонтитул «исчез», используйте тот же номер в главном поле-поле, что и для высоты нижнего колонтитула. Это модерируемый дизайн от оригинального дизайна липкого нижнего колонтитула от: http://www.webcreationz.nl/de-ultieme-sticky-footer-code (извините, сайт на голландском языке).
Я только что понял это. Надеюсь, это кому-нибудь поможет.
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;
}