Repeating background image with absolute footer

483 Views Asked by At

I am trying to have a repeating image as my background for a blog I run.

I cannot get the footer to appear.

EDIT: THE CODE PROVIDED HAS THE HEADER, REPEATING IMAGE, AND FOOTER. It was the simplest way to code in the images for the background.

body {

   background:#1b0e11;    
   color:#170d23;    
   font:11px/18px arial, verdana, helvetica, sans serif;    
   margin:0px 0px 0px 0px;
   padding:0px;    
   background-image: url(http://i1331.photobucket.com/albums/w595/4V3D15/header_zpsf652d36b.png), url(http://i1331.photobucket.com/albums/w595/4V3D15/middle_zps8a8ab3d1.png), url(http://i1331.photobucket.com/albums/w595/4V3D15/footer2_zpsc6e75bc2.png);    
    background-repeat: no-repeat, repeat-y, no-repeat;    
   background-position: center top, center center, center bottom;  
     }
2

There are 2 best solutions below

1
On

Just remove/comment this out:

// background-repeat: no-repeat, repeat-y, no-repeat;

Not quite sure where your code is for the footer, can you provide a fiddle?

0
On

I fail to see a problem with the code you provided.

My attempt at a footer using your background.

HTML:

<div class="footer">Footer</div>

CSS:

body {
    background:#1b0e11;
    color:#170d23;
    font:11px/18px arial, verdana, helvetica, sans serif;
    margin:0px 0px 500px 0px;
    padding:0px;
    background-image: url(http://i1331.photobucket.com/albums/w595/4V3D15/header_zpsf652d36b.png), url(http://i1331.photobucket.com/albums/w595/4V3D15/middle_zps8a8ab3d1.png), url(http://i1331.photobucket.com/albums/w595/4V3D15/footer2_zpsc6e75bc2.png);
    background-repeat: no-repeat, repeat-y, no-repeat;
    background-position: center top, center center, center bottom;
}
.footer {
    width: 100%;
    height: 100px;
    outline: 1px solid;
    background: #eee;
    position: absolute;
    bottom: 0;
}

DEMO HERE