Overview
This utility allows to create CSS background-image
style from child <img>
without any CSS. It’s necessary to add .has-bg-img
class to parent element where the background image has to be applied, and .bg-img
to child <img>
that will be transformed into css background-image
. The original <img class="bg-img">
gets display: none
so it will not be represented in DOM.
Example
Add background image to parent element.
Background image utility
With this utility you can easily set background image without writing any CSS!

<div class="p-5 text-white has-bg-img">
<h5>Background image utility</h5>
<p>With this utility you can easily set background image without writing any CSS!</p>
<img src="/assets/img/slide-img-01.jpg" class="bg-img" alt="Background Image">
</div>