Can you bind .resize() to $(document) instead of $(window)?

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.

Answer 2

In short, yes, $(document).resize() will detect changes in the document size.

Answer 3

There is no standard document.resize event that you can hook into.

A common technique is to check when the DOM tree is modified, thus likely to change document height and then adjust anything that you'd like to adjust in there: how to detect document size change in jquery. Be warned that it may not be a good thing to do performance-wise.

Firefox exposes an event Detecting document width and height changes, but then, its FF only.

Your best bet is to use a cover image that kind of tapers off and use the end color as background color for the document. It can give you this effect where it seems the image continues but without using the image. A good example of this is twitter.