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


  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

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.