This time I will share jQuery Plugin and tutorial about Convert Image Into Background Image – convertToBackground.js, hope it will help you in programming stack.
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.
How to use it:
1. Wrap your image into a container element.
2. Include jQuery JavaScript library and the minified version of the jQuery convertToBackground.js plugin right before the </body> tag.
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"> |
5 |
<script src="jquery.convertToBackground.min.js"></script> |
3. Call the function on the container element and specify the height/width of the cropped image.
1 |
$('.example').convertToBackground({ |
4. Keep the aspect ratio on window resize.
1 |
$('.example').convertToBackground({ |
5. Customize the CSS background properties.
1 |
$('.example').convertToBackground({ |
3 |
position: 'center center', |
6. Define the path to the fallback image.
1 |
$('.example').convertToBackground({ |
This awesome jQuery plugin is developed by zeshanshani. For more Advanced Usages, please check the demo page or visit the official website.
