Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
jQuery plugin to help serve the best image size for use with the 100% background plugin Backstretch.
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.gitignore
README.markdown
jquery.backscratch.js
jquery.backscratch.min.js

README.markdown

Backscratch

Backscratch is a jQuery plugin that serves up better image sizes when using Backstretch

It's based on the technique from CSS Tricks that uses a shim to load an image and then, based on the browser size, loads up an image that best matches that window size.

Small window = smaller image. Smaller image = faster loading.

Demo

Disclaimer

Right now, backscratch will only work on elements and not the entire window like Backstretch does. That functionality is planned.

Usage

Include jQuery, Backstretch and Backscratch on your page.

Use the data-src on your container element to tell backscratch the basename of the images you've created.

<div class="backscratch">

  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="bg" data-src="/path/to/your/image.jpg" />

</div> <!-- header -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script src="jquery.backscratch.min.js"></script>
<script>

  // Call backscratch with the image size options you want to use
  $(".backscratch").backscratch([1024, 1280, 1366]);

  /**
   * Ideally, you've created images with the following names
   *
   * image_1024.jpg
   * image_1280.jpg
   * image_1366.jpg
   */

</script>

Using Backscratch as a background

Instead of attaching Backscratch to an element on the page, you can attach it to the background of the page by omitting the element on the backscratch function call.

<script>

  $.backscratch([1024, 1280, 1366]);

</script>

Links & Thanks

Something went wrong with that request. Please try again.