Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Create fullscreen background image with pure Javascript.
CoffeeScript
Tree: 7378bc2fd1

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
docs
src
LICENSE.txt
README.md
mantel.js
mantel.min.js

README.md

Mantel

Mantel (spanish for tablecloth) is a small script (less than 1K when minified and gzipped) that scales your images to fit its container without destroying its aspect ratio.

As an useful example, it scales an image to fit your browser window and create an effect of fullscreen background.

Mantel does not require jQuery or advanced CSS3 techniques to work. It uses pure JavaScript so you will be better knowing a little bit of DOM selectors.

How to use

First add the Mantel script in your document. Then create a new instance of it sending as first argument the image element that you want to be resized.

image = document.getElementById('myImage');
var myMantel = new Mantel(image);

Please note that the constructor expects the image as a DOM element. If you are using jQuery, you can do something like this:

image = $('#myImage').get(0)
var myMantel = new Mantel(image)

Remember to set styles

A couple of CSS rules are needed to make Mantel work:

  • If you need to resize the image according to the window size, then add your CSS:
  #myImage {
    position: fixed;
    top: 0;
    left: 0;
  }
  • For any other element use:
div.parent_of_image {
  position: relative
  overflow: hidden
}
#myImage {
  position: absolute;
  top: 0;
  left: 0;
}

Optional arguments

The constructor accepts an object as a second optional argument with the following properties:

  • container: Which element will determine the dimensions of the image. Please note that only window triggers the resize event so if you set this to any other element, the resize effect will not happen automatically. In the case, you can call the resize method based on your own triggers. Defaults to window.
  • dontbind: Should the bind of Mantel to the resize event of window be prevented? Set this to true and nothing will happen on resize of the window. If containter is set, this is set to true. Defaults to false.

Public methods

  • resize: Resize the image according to the size of the defined container on construction. Use this if you set dontbind to true or containerto anything but window.
Something went wrong with that request. Please try again.