Question

I’m wondering if $(document).resize() should make sense or not?

The problem is that when the document gets larger (i.e. a div get extended for some reason) the height of the document changes. I would like to stretch my background image so that the added area to the document won’t be blank. What would be the best way of doing this?

Basically, is there a way to get notified when the document height has changed?

To be clear, I don’t want my image to repeat.

Answer 1

You can do this with CSS:

body {
    background-image: url(yourImage.png);
    background-size: cover;
}

background-size is supported by all modern browsers.

The cover property will cause the image to be as small as possible but still cover the element completely. It maintains aspect ratio and will crop if necessary.