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

Question

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

The problem is that when the document gets bigger (i.e. a div expanding for some reason), the height of the document changes. I would like to stretch the background image so that the added area of ​​the document is not empty. What would be the best way to do this?

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

To be clear, I do not want my image to be repeated.

Answer 1

You can do this with CSS:

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

background-size supported by all modern browsers .

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

Answer 2

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

Answer 3

There is no standard document.resize event that you can connect to.

A common technique is to check when the DOM tree has been resized, which will probably change the height of the document, and then adjust everything you want to adjust there: how to detect a document resizing in jquery . Be warned that this may not be good in terms of performance.

Firefox provides the event Detect changes in the width and height of a document , but then only its FF.

It’s best to use a cover image that is compressed and use the end color as the background color for the document. It can give you this effect when the image seems to continue, but without using the image. A good example of this is twitter .

Answer 4

Try DOMSubtreeModified :

 $(document).on('DOMSubtreeModified', function() { ... });