Robot-friendly background-size: cover.

Usage no npm install needed!

<script type="module">
  import imageBlock from '';



npm version

ImageBlock is a dead-simple way to use an <img> 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


  • jQuery

Quick Start

Getting started is ridiculously easy:

  1. Make sure you have jQuery.
  2. Include the dist files, image-block.js and image-blocks.css.
  3. Put an img.image-block-bg inside a div.image-block.
  4. 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:

<!doctype html>
<html lang="en-us">
        <meta charset="utf-8">
        <link rel="stylesheet" href="/css/image-block.css">
        html, body, .image-block {
            height: 100%;
            margin: 0;
            padding: 0;
        <div class="image-block">
            <img class="image-block-bg" src="" alt="placeholder">
            <div class="image-block-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <script src=""></script>
        <script src="/js/image-block.js"></script>

Advanced Configuration

If you'd like to go a bit further, follow these steps to reduce the total number of HTTP requests and improve your workflow.

First, install ImageBlock via NPM:

npm install image-block --save

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

window.jQuery = require('jquery')
@import "node_modules/image-block/src/sass/image-blocks"

And that's it!