Beegee v0.1.2

Beegee

Beegee is a lightweight piece of javascript that allows the use of multiple background images which are queried depending on viewport width. You can set any breakpoints you want.

Add the script to your page or import directly to your javascript file.

import Beegee from 'Beegee';

Create a new constructor and define custom breakpoints like so:

var beegee = new Beegee({
  breakpoints: [
    { 
      minWidth: 320,
      src: 'data-bg-mobile'
    }, 
    {
      minWidth: 768,
      src: 'data-bg-desktop'
    }
  ]
});

You can define as many breakpoints as you like.

Example of a div using Beegee (you must use the js-beegee class or define your own selector):

<div class="banner js-beegee"
      data-bg-mobile="images/photo-mobile.jpg"
      data-bg-desktop="images/photo-desktop.jpg"></div>

Note the image name has no devicePixelRatio. You can also use a dpr of 1 in the filename should you need to, eg. photo-desktop-1x.jpg

Example with all default settings:

var beegee = new Beegee({
  selector: '.js-beegee',
  dprPrefix: '-',
  dprSuffix: 'x',
  breakpoints: [
    { 
      minWidth: 320,
      src: 'data-bg-mobile'
    }, 
    {
      minWidth: 768,
      src: 'data-bg-desktop'
    }
  ]
});

Note: Be sure to add 1x, 2x, 3x, 4x, etc. before your image extensions as Beegee will look at the browser devicePixelRatio and select the appropriate image.

Example image names: photo-mobile-1x.jpg, photo-desktop-1x.jpg, photo-mobile-2x.jpg, photo-desktop-2x.jpg