jQuery Anystretch

Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element. The image will stretch to fit the page/element, and will automatically resize as the window size changes.

Handy when having a fluid layout/responsive design.

Anystretch Demo →
Anystretch (GitHub) →

UPDATE: Reader Oemebamo pointed out that this can be achieved with CSS, using background-size: cover;. Turns out background-size is widely supported (thought it was Chrome only).

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

4 Comments

  1. Hi, I am trying to figure out how to get this to work on the background element.
    I would like the body{background-image: url(blablah.jpg);} to have a background image that behaves the same way this does in a div.Can anyone help me with this? I tried: $(‘body’).anystretch(“img01.jpg”); but it does not work right. The image has a padding applied and if there is not enough content to fill the screen the image disappears.

  2. I tried using Anystretch with Masonry and I could not get it to work correctly. Do you know why this would happen?

Leave a comment

Leave a Reply to Nate Arnold Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.