As great as backstrech is for most purposes, it can be inconvenient for some as it targets the very center of an image when the viewport is smaller than the original image, both vertically and horizontally (see image above).

For general background images like landscapes, patterns etc, this is ideal, but for pictures that include important details at the top, backstretch’s vertical centering of images is a complete inconvenience.

Here is a modified copy of jquery.backstretch.min.js that will display all images larger than the viewport centered top.

Just replace your existing backstretch.js file with the new one provided and you are done!

All other behaviors are unmodified, so everything else other than the positioning of the image in smaller viewports will be unchanged.

If you missed it above, the modified version of backstretch.js can be found here.