How to add background image in html

Adding a background image to your web page can enhance its visual appeal and create a more engaging user experience. There are several ways to add a background image in HTML, each offering different levels of control and customization. In this article, we'll explore various methods to add background images using CSS and Bootstrap classes.

Using Bootstrap

Add background-image via inline CSS.
Define the background height. In the example below we use vh units, which stands for "viewport height" (height: 30vh means 30% of available height.)
Add .bg-image class to scale the image properly and to enable responsiveness.

More examples can be found on the background images page.

Hello World

HTML

        
            
          <div class="bg-image d-flex justify-content-center align-items-center" style="background-image: url('path/to/your/image.jpg');
               height: 30vh">
               <h1>Hello World</h1>
          </div>

Using CSS

Inline styles allow you to add a background image directly within the HTML element.

Set background-image to specify the image URL.
Use background-size: cover; and background-position: center; for proper image scaling and positioning.
Other CSS properties are used to style and center the content within the container.

Hello World

HTML

        
            
          <div style="
            background-image: url('path/to/your/image.jpg'); 
            background-size: cover; 
            background-position: center; 
            width:100%; height: 30vh; 
            color: white; 
            text-align: center; 
            display: flex; 
            justify-content: center; 
            align-items: center;
            ">
            <h1>Hello World</h1>
          </div>