Stretched Background Images

NPM package - adds a stretched (filling) BG image to any html element where you add the "stretched-bg-image" class.

credits

For examples images in demo, see demo. Idea and design for squiggly images is by Niels from Guts

Also See

• NPM Listing
• Demo

Installation // new-school

Install via npm:

npm i @sunnysideup/stretched-bg-image

Add the following code to your js file:

import StretchedBgImages from 'stretched-bg-images'

And, add the following code to your scss file:

import "StretchedBgImages";

Installation // old-school

Add the following code to your html:

<link rel="stylesheet" href="stretched-bg-images/src/css/StretchedBgImages.css" />
...
<script src="stretched-bg-images/src/js/StretchedBgImages.js"></script>
<script>
  // add script here!
</script>

Applying it to your page ...

To apply it to any element, use the stretched-bg-images class, like this:

<div class="stretched-bg-images">
  ...
</div>

Running it

Add the following JS (old and new school):

StretchedBgImages.apply()

Or with all options defined:

const options = {

queryString: '.stretched-bg-images, ul',

errorClass: 'ratio-is-off-the-charts',

classRanges = [
  {
    max: '8',
    min: '2',
    className: 'panorama'
  },
  {
    max: '2',
    min: '1',
    className: 'landscape'
  },
  {
    max: '1',
    min: '0.5',
    className: 'portrait'
  },
  {
    max: '0.5',
    min: '0.125',
    className: 'skyscraper'
  }
]
}
StretchedBgImages.apply(options)

Options

• Above you are seeing the default values, you can set them as you see fit.
• max and min refer the maximum and minimum aspect ratio defined as width divided by height (i.e. 8 means that the width is four times greater than the height of the containing box.)
• queryString can be anything that works with: document.querySelectorAll.
• errorClass is the class that is added when the ratio of the element is outside the described scopes in classRanges.

Using SVGs

If you are using SVGs then you need to remove width and height attributes from SVG and add preserveAspectRatio="none". Like this:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 123 456">...</svg>

You can use https://yoksel.github.io/url-encoder/ to convert SVGs to backround images. Making your code even faster.