Bootstrap Background image
Set background image easily to any element without writing any CSS code.
Overview
Create responsive background image on any element without any CSS code. Just add .bg-img
class on your <img>
element and .has-bg-img
class to parent element that you want to apply a background image. Images are part of the DOM and are transformed into CSS background-image
after they are fully loaded. It’s also possible to mix background image with background color using Background blend mode.
Example
A basic hero section banner example with background image cover. Background image automatically adapts the element’s area using background-size: cover
.
Hero Section
It's easy to set background image with Torus Kit
<div class="has-bg-img">
<h2>Hero Section</h2>
<h4>It's easy to set background image with Torus Kit</h4>
<img class="bg-img" src="..." alt="...">
</div>
Background blend mode
To mix background image with background color together use one of the .bg-blend-<multiply|overlay|screen>
. Otherwise only background image will be visible.
Multiply
Add .bg-blend-multiply
class to .has-bg-img
to use multiply blending mode.
Background blend mode: Multiply
<div class="has-bg-img bg-purple bg-blend-multiply">
<h4>Background blend mode: Multiply</h4>
<img class="bg-img" src="..." alt="...">
</div>
Overlay
Add .bg-blend-overlay
class to .has-bg-img
to use overlay blending mode.
<div class="has-bg-img bg-purple bg-blend-overlay">
<h4>Background blend mode: Multiply</h4>
<img class="bg-img" src="..." alt="...">
</div>
Screen
Add .bg-blend-screen
class to .has-bg-img
to use screen blending mode.
Background blend mode: Screen
<div class="has-bg-img bg-purple bg-blend-screen">
<h4>Background blend mode: Multiply</h4>
<img class="bg-img" src="..." alt="...">
</div>
Object-fit background image
It’s possible to create background image with using just available utility classes. Add .bg
class to the background image, that makes it absolute positioned and set width: 100%
and height: 100%
. Than add .obj-fit-cover
class this <img>
to make the image fill the space. Also make sure to set the position to parent element. You can use position utility class.
Because the .bg
element will appear above the content, you need to add .position-relative
and .z-index-1
classes to this content.
Background image with .obj-fit-cover
<div class="position-relative">
<h4 class="z-index-1 position-relative">Background image with .obj-fit-cover</h4>
<img class="bg obj-fit-cover" src="..." alt="...">
</div>
Bootstrap background image FAQ
How to change Bootstrap background image opacity
You cannot control the CSS background-image
opacity directly, but you can use the example above and set the .opacity-*
to the image with the opacity class.