Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How repeat background image in div longer then page length?

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 :)

like image 568
Scott Hallauer Avatar asked Jun 02 '12 20:06

Scott Hallauer


People also ask

How do I stretch a background image in CSS?

You can use the CSS background-size: cover; to stretch and scale an image in the background with CSS only. This scales the image as large as possible in such a way that the background area is completely covered by the background image, while preserving its intrinsic aspect ratio.

What are the 4 options on background-repeat?

1, the background-repeat property had four options: no-repeat , repeat , repeat-x and repeat-y . While these are undoubtedly useful, they don't permit finer control over the repeating process and tiles will be clipped if they don't fit the container an exact number of times.

What feature is used to control the repetition of an image in the background?

To control the repetition of an image in the background, use the background-repeat property. You can use no-repeat value for the background-repeat property if you do not want to repeat an image, in this case, the image will display only once.


1 Answers

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%.

like image 140
dotty Avatar answered Oct 15 '22 13:10

dotty