Skip to content

Latest commit

 

History

History
 
 

full-img-bg

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo
demo
 
 
js
js
 
 
styles
styles
 
 
README.md
README.md
 
 

README.md

Cargo Bay Full Image Background

General

CSS3 Full Image background with a fallback (jquery-backstretch) for older browsers. The image is placed inline for content-input of the image trough the CMS.

Default, background-size:cover will be used. For browsers that don't support this feature, Modernizr will deliver the fallback scripts.

Dependencies

Usage

The class .full-img-bg is used as a javascript hook. Via the data-backstretch-img attribute we set the background image for the fallback.

Make sure that when you build your Modernizr you have the Modernizr.load() property enabled. This is used to load the fallback javascript files.

On the Body tag

    <body class="full-img-bg" style="background-image: url(imgUrl);" data-backstretch-img="imgUrl">
        ...
    </body>

On a block level element

    <div class="full-img-bg" style="background-image: url(imgUrl);" data-backstretch-img="imgUrl">
        ...
    </div>

Fallback

Initialise
Modernizr.load({
    test: Modernizr.backgroundsize,
    nope: ['http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js', '../js/full-img-bg.js'],
    callback: function(url, result, key) {
        if(key == 1) {
            cargobay.backstretch.init();
        }
    }
});