backgroundcover – This jQuery plugin is a smarter version of the CSS3 feature “background-size: cover”, to cover the area of a HTML element with a background image.

2014-11-02 • Plugins • Views: 1277

A sometimes problematic issue of the default CSS behaviour of “background-size: cover” is that it may cut of important parts of the image to fill up the space. Especially when the aspect ratio is very different (say an image in a landscape format viewed on a smartphone in portrait mode), substantial amounts of the image will be cropped. Not that good, if that happens to be the important, story telling parts of the image (maybe a face).

The solution is to tell the plugin about a so called safe area, that may not be cropped. The background image will then be scaled as much as the safe area allows to cover its element. That might however leed to the situation, that the image cannot be scaled as much to wholy cover its element. It works the better, the smaller the safe area is. If you define the whole image as the safe area, it will actually behave like “background-size: contain”.

 

Website

Demo

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Shares