How to repeat background image in div longer than page length?

Question

DIV (page length longer) stops repeating

I have an HTML web page with a background image (in a div), a div extending from the top to the bottom of the page and as a div for the content ... However, the DIV (stretched from top to bottom) the background stops repeating beyond 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:)

Answer 1

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

More information can be found here .

EDIT

Ah, now I see. #main - 100% of the browser when it loads. You will notice that the repeat stops, you scroll. A simple solution would be to add bottom:0 to the #main style. This will make it stretched to the very bottom. Also, remove height: 100% .