Html – How repeat background image in div longer then page length

backgroundcsshtml

DIV's (longer than page length) background stops repeating

I have HTML webpage with a background image (in a div), a div stretching from the top to the bottom of the page and in that a div for content… However the DIV's (stretching from the top to bottom) background stops repeating further down the page! (as soon as you scroll down, there is no more background image) Please help!

Here is the CSS:


    html {
     height:100%;
    }
    body {
     background-color:#7E6F7F;
     height:100%;
    }
    #bg { /*This is the background image for the whole page*/
     position:fixed; 
     top:0; 
     left:0; 
     width:100%; 
     height:100%;
    }
    #main { /*This is the problem div!!!*/
     padding:0px;
     width:85%;
     height:100%;
     background-color:#D2B9D3;
     background: url(Images/Background_Content.jpg);
     background-attachment:fixed;
     background-position:0% 0%;
     position:relative; 
     top:0;
     left:0;
     z-index:1;
     margin:auto;
    }
    #content { /*This is the the div for the content*/
     display:block;
     width:85%;
     background-color:#E9CFEC;
     padding:0.9375em; /*0.9375em=15px*/
     border:0.125em solid #867687; /*0.125em=2px*/
     text-align:justify;
     -webkit-border-radius:15px;
     -moz-border-radius:15px;
     border-radius:15px;
     -moz-box-shadow: inset 0 0 5px 5px #BAA6BD;
     -webkit-box-shadow: inset 0 0 5px 5px #BAA6BD;
     box-shadow: inset 0 0 5px 5px #BAA6BD;
    }

Thanks for your help 🙂

Best Answer

You'll need to use background-repeat and set it to either repeat-x, repeat-y or repeat-both.

More details can be found here.

EDIT

Ah, i see now. The #main is 100%, of the browser when it loads. You'll notice that the repeat stops onces you scroll. A simple solution would be to add a bottom:0 to the #main style. That'll make it stretch to the very bottom. Also, remove the height: 100%.

Related Topic