Geek asks and answers

Background repeat with html, body height up to 100% with sticky css footer

Problem

I am using this implementation of sticky CSS footer. It does:

html,body{
    height:100%;
}

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

I understand that the image gets the size of the window when rendering and thus never exceeds it.

Question

Is it possible to continue to use the existing CSS sticky footer selection with a repeating background image that is fully displayed on long pages.

OR

Is there another CSS sticky footer option that supports repeating backgrounds?

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;}
0
2

. , . bg- div # no-footer,

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 :

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

, , div (#no-footer-pad),

+1

, ,

.footer{
position:fixed;
bottom:0;
left:0;
right:0;
height:xxxx;
}
0

More articles:


All Articles