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.


Anton Suprun
Current version
GitHub Issues



  • _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: {
    position: relative;
    z-index: 2;


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.


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;


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