Home/ Questions/Q 8286519
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T11:47:44+00:00

Problem I’m using this implementation of a CSS sticky footer. It does: html,body{ height:100%;

  • 0

Problem

I’m using this implementation of a CSS sticky footer. It does:

html,body{
    height:100%;
}

I use (would like to) use a repeating background, however, the height:100% causes this issue:
enter image description here (image from another sticky footer question with unsatisfactory answers)

It’s my understanding that the image gets sized to the size of the window at rendering, and thus never sizes past that.

Question

Is it possible to continue to use my existing choice of CSS sticky footer with a repeating background image rendered completely on long pages

OR

is there another option of CSS sticky footers which does support the repeating background?

For reference

<div id="wrap">
    <div id="header">Header text</div>
    <div id="main">

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

CSS

* {margin:0;padding:0;} 
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
    padding-bottom: 180px;}  /* must be same height as the footer */
#footer {position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Simply add additional wrapper. At least I always do exactly that. And attach bg-image to div#no-footer, it will stretch to the bottom

    html, body {
    height:100%;
}
#wrap {
    min-height:100%;
    background-image:url(...) top left repeat-x;
}
#no-footer-pad {
    padding-bottom:100px;
}
#footer {
    height:100px;
    margin-top:-100px;
}

    html markup:

    <html>
<head></head>
<body>
    <div id="wrap">
         <div id="no-footer-pad"></div>
    </div>
    <div id="footer"></div>
</body>

    So you have almost this markup, you must simply add additional div (#no-footer-pad), so that your content would not overlap footer

    • 0