Backstretch | Responsive Web Design

Backstretch

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

Providing a full screen background image used to be tricky before the arrival of CSS3 supporting a the following option.


html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Chris Coyier’s post on Perfect Full Page Backgrounds is a great read.


Options

centeredX

The ratio of the width/height of the image doesn’t always jive with the width/height of the window. This parameter controls whether or not we center the image on the X axis to account for the discrepancy. (type=Boolean, default=true)

centeredY

This parameter controls whether or not we center the image on the Y axis to account for the aforementioned discrepancy. (type=Boolean, default=true)

speed

This is the speed at which the image will fade in, after downloading is complete. Integers are accepted, as well as standard jQuery speed strings (slow, normal, fast). (type=Integer, default=0)

Setup

Include the jQuery library and Backstretch plugin files in your webpage (preferably at the bottom of the page, before the closing BODY tag):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script type="text/javascript" src="/jquery.backstretch.min.js"></script>;

Note: The example above uses the Google hosted version of jQuery; there is also a jQuery source file included with this distribution, if you would like to host it yourself.

<script type="text/javascript">
  $.backstretch("/path/to/image.jpg", {speed: 150});
</script>

Want to change the image after Backstretch has been loaded? No problem, just call it again!

<script type="text/javascript">
  $.backstretch("/path/to/image.jpg", {speed: 150});
  
  // Perhaps you'd like to change the image on a button click
  $(".button").click(function() {
      $.backstretch("/path/to/next_image.jpg");
  });
</script>
  • Resource Name

    Backstretch

  • Resource Creator

    Scott Robbin

Description

Backstretch will stretch any image to fit the page, and will automatically resize as the window size changes. Images are fetched after your page is loaded, so your users won't have to wait for the (often large) image to download before using your site

View on Github Download Resource

Sites that use Backstretch

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.