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.

Background blend mode: Overlay

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