Pro

Bootstrap Background image

Set background image easily to any element

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!

Background Image
<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>