jQuery plugin to help serve the best image size for use with the 100% background plugin Backstretch.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



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.



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


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>

  // 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


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.


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


Links & Thanks