How to make background image responsive in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this article, we will use some bootstrap classes to design responsive background image.

To make background image responsive, put background-size: 100% 100%; and background-repeat: no-repeat class to create background image responsive in bootstrap.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Includes css in html page
  • Define its class name

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> 

Step 3: Includes css in html page

Here we are using in css class to create background image.

     .bg-image { 
    width: 100%; 
    height: 600px; 
    background-image: url('image/background-image.jpg'); 
    background-size: 100% 100%;  
    background-repeat: no-repeat;
} 

Step 4: Define its class name

After that, create background image responsive with a class name .bg-image.

<div class="bg-image"></div> 

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> 
<style> 
.bg-image { 
    width: 100%; 
    height: 600px; 
    background-image: url('image/background-image.jpg'); 
    background-size: 100% 100%;  
    background-repeat: no-repeat;
} 
</style> 
</head> 
<body> 
	<div class="bg-image"></div> 
</body> 
</html> 

Check the output of the above code example.

when window size is > 576px :

Bootstrap, Table, Responsive

When window size is less than < 576px :

Bootstrap, Table, Responsive

All the best 👍

Follow me on Twitter