Convert Image Into Background Image - convertToBackground.js

Yet another jQuery Image To Background plugin which converts the original images into CSS background images in their parent containers, while maintaining the original aspect ratios.

Can be used as an alternative to the responsive image solution for your cross-platform project.

See also:

• Convert Images Into CSS Backgrounds - jQuery jfImgToCSS

How to use it:

1. Wrap your image into a container element.

<div class="example">
  <img src="https://source.unsplash.com/JlymtjqG2aU/500x250">
</div>

2. Include jQuery JavaScript library and the minified version of the jQuery convertToBackground.js plugin right before the </body> tag.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.convertToBackground.min.js"></script>

3. Call the function on the container element and specify the height/width of the cropped image.

$('.example').convertToBackground({
  width: 500,
  height: 500
});

4. Keep the aspect ratio on window resize.

$('.example').convertToBackground({
  responsive: true
});

5. Customize the CSS background properties.

$('.example').convertToBackground({
  repeat: 'no-repeat',
  position: 'center center',
  size: 'cover',
  attachment: ''
});

6. Define the path to the fallback image.

$('.example').convertToBackground({
  fallbackSrc: ''
});

---

This awesome jQuery plugin is developed by zeshanshani. For more Advanced Usages, please check the demo page or visit the official website.