Repeating Background image getting cut off

css, html

Solution

If the height (computed if height is auto) of your div is not a multiple of the height of your background image, it will get cut off (`overflow: visible` does not apply to background images). Two possible solutions are:

- Make sure your height of your DIV is a multiple of the height of your background-image

- Use the `background-size` property (CSS3 only) to scale the background image to fill the DIV (if applicable)

- Use a little bit of JS to set the height of your DIV to the nearest multiple of the height of your background image (i.e. basically same as 1, but via JS)

Code for Option #3

Demo: http://jsfiddle.net/h6tUs/2/

var img = new Image();
img.onload = function() {
    adjustHeight(img.height);
};
img.src = 'http://www.jamfactory.co.za/left.png';
if(img.complete) {
    adjustHeight(img.height);
}
function adjustHeight(_imgHeight) {
    var ht = $('#container').outerHeight(false);
    ht = ht + (ht % _imgHeight);
    $('#container').height(ht);    
}

The above code should go inside your `$(document).ready(...)`

Problem

I have a container DIV which scales with it's content in height. It has a background image that repeats down making a pattern. The Problem is the repeating background image gets cut off at the bottom of the div. Is there a way to tell the background image to not get cut off? Here is the code: http://jsfiddle.net/WkEKD/7/ Thanks

Original source