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).
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.
You would want to use the “backstretch” version of this plugin for that : )
Thanks Nate! 😎
I tried using Anystretch with Masonry and I could not get it to work correctly. Do you know why this would happen?