You’ve got a div container to which you’ve assigned a background image that repeats, but for some reason the background image gets cut off before the bottom of the container –it’s not repeating. Or maybe it’s repeating in FF but not IE…
Common Culprit
Floated elements immediately inside the containing div with a repeating background image.
A common cause for CSS background images not to repeat as they should is that the container with the repeating background image contains divs or other elements that are floated.
Example Problem:
#wrapper {}
#page { background: url (images/background.jpg) repeat-y; }
#sidebar { float: left; width: 20%; }
#content { float: right; width: 80%; }
</style>
<div id='wrapper'>
<div id='page'>
<div id='sidebar'></div>
<div id='content'></div>
</div>
</div>
Essentially, a floated element is one that has been removed from the div order to either the left or right. Because the #sidebar and #content divs are floated, they are removed from the div order and the #page div is unable to render correctly around the floated divs.
Some browses will render this as you intend, with the background image repeating correctly, but not all will. It’s a good idea to check your site in IE as well as a standards-compliant browser (if not also more particular browsers) to see that you’re backgrounds are repeating as they should.
Better yet, get in the habit of remembering how floats work when you’re adding containers that have background CSS image properties.
Solution
Create a container div inside the original, so that the uber-div is the one with the repeating background image.
Using our original example, let’s reassign the background image to the larger containing div as shown below.
Example Solution:
#page { }
#sidebar { float: left; width: 20%; }
#content { float: right; width: 80%; }
</style>
<div id='wrapper'>
<div id='page'>
<div id='sidebar'></div>
<div id='content'></div>
</div>
</div>
Simply by moving the background image style from the ‘inner’ containing div to the outermost container div in your CSS stylesheet, a buffer is put in place that protects the div order, thus preserving the outermost div’s repeating background CSS styles.
Other Causes of the Non-Repeating Background Image
For various interesting reasons [quotation-marks versus no-quotation-marks] in the path to your background image, as well as (‘background’ versus ‘background-image’) CSS attributes can make a difference, so be sure to try out the alternatives if you’re having trouble with a background image:
.some_class {
background: url (images/BG.jpg) repeat-y;
background: url ('images/BG.jpg') repeat-y;
background-image: url (images/BG.jpg) repeat-y;
background-image: url ('images/BG.jpg') repeat-y;
}
</style>
Double Check the File Path
If your CSS stylesheet uses relative paths to your background image be sure they are relative to your stylesheet. In the example above the stylesheet is located in a folder that also contains the ‘images’ folder. If you are unsure about the relative path, go ahead and use an absolute ( like http://yoursite.com/images/BG.jpg ).
