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

        
            
          <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

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