ImageBlock


ImageBlock is a dead-simple way to use an element like you would background-size: cover;.

Why Use ImageBlock?

There are numerous reasons to use ImageBlock:

1. You want responsive background images
2. You want to use an alt attribute with a background image
3. You want to use the transform property with a background image

Dependencies

- jQuery

Quick Start

Getting started is ridiculously easy:

0. Make sure you have jQuery.
1. Include the dist files, image-block.js and image-blocks.css.
2. Put an img.image-block-bg inside a div.image-block.
3. Put a .image-block-content after the img.image-block-bg (optional).

Note: to render properly, .image-block must either:

- Have a defined width or height
- Contain an .image-block-content with inner content.

For example:

``html











Lorem ipsum dolor sit amet, consectetur adipisicing elit.

`bash
npm install image-block --save
`

From there, you can import the src files in JavaScript and Sass:

`javascript
window.jQuery = require('jquery')
require('image-block')
`

`sass
@import "node_modules/image-block/src/sass/image-blocks"
``

And that's it!