FitImage 0.2.0

FitImage allows you to have a background image stretched proportionally to full screen width and height. It also remains fixed while the user scrolls the page. Like on thesixtyone.



Details

Author
Anton Suprun
Current version
0.2.0
GitHub
kpobococ/FitImage
Downloads
6038
Category
Utilities
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • Core/Array
    • Core/Class.Extras
    • Core/DOMReady
    • Core/Element.Dimensions

How to use

Using FitImage is as simple as it gets:

new FitImage('/background.jpg');

Also note, that this plugin does not include any style properties except those that are dynamically generated, so you will have to add some styles to your stylesheets:

img.resize-background {
    position: fixed;
    z-index: 1;
}

Also, you want to create a wrapper for your content and set its z-index to keep it above the image:

div.global-wrapper {
    position: relative;
    z-index: 2;
}

Configuration

The following configuration options are available:

  • class: image element class name(s)
  • center: should the image be centered or not. Defaults to true.
  • minWidth: minimum image width. If the screen width is less than the minimum width, image size will not be reduced. Defaults to 1024.
  • minHeight: minimum image height. Behaves identical to minWidth. Defaults to 768.
  • primary: defines which dimension should perfectly fit the screen. Either width, height or auto. The auto setting makes sure the image completely covers the screen. Defaults to auto.
  • injectElement: element to be passed to the inject method. Defaults to document.body.
  • injectPosition: position to be passed to the inject method. Defaults to top.
  • sizeElement: element acting as reference for the size of the image. Defaults to window.

Image resizing operations always keep the image proportions intact.


Examples

A background image aligned on the left side and fixed to fit screen height:

new FitImage('/background.jpg', {
    'center': false,
    'primary': 'height'
});

And styles:

img.resize-background {
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
}
.wrapper-global {
    min-height: 100%;
    position: relative;
    z-index: 2;
}

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus