From f4a5726f996652a50e767ba18847bf34df7e4e7f Mon Sep 17 00:00:00 2001
From: Apoorv Saxena <asaxena001@gmail.com>
Date: Mon, 25 Sep 2017 01:27:01 +0530
Subject: [PATCH] :sparkles: added background image support (#39)

* :sparkles: added support for background images
---
 README.md    | 11 ++++++++++-
 src/lozad.js |  3 +++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3ba7a8f..0fd628e 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
 - is a light-weight library, *just **535 bytes*** minified & gzipped,
 - has NO DEPENDENCIES :)
 - allows lazy loading of dynamically added elements as well,
-- supports responsive images
+- supports responsive images and background images
 
 It is written with an aim to lazy load images, iframes, ads, videos or any other element using the recently added [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) with tremendous performance benefits.
 
@@ -119,6 +119,15 @@ for use with responsive images
 <!-- responsive image example -->
 <img class="lozad" data-src="image.png" data-srcset="image.png 1000w, image-2x.png 2000w" />
 ```
+
+for use with background images
+```html
+<!-- background image example -->
+<div class="lozad" data-background-image="image.png">
+</div>
+```
+
+
 ## Browser Support
 
 Available in [latest browsers](http://caniuse.com/#feat=intersectionobserver). If browser support is not available, then make use of this [polyfill](https://www.npmjs.com/package/intersection-observer).
diff --git a/src/lozad.js b/src/lozad.js
index 62c2de8..b672f57 100644
--- a/src/lozad.js
+++ b/src/lozad.js
@@ -8,6 +8,9 @@ const defaultConfig = {
     if (element.dataset.srcset) {
       element.srcset = element.dataset.srcset
     }
+    if (element.dataset.backgroundImage) {
+      element.style.backgroundImage = 'url(' + element.dataset.backgroundImage + ')'
+    }
   }
 }