How to add image in HTML

Adding images to your HTML documents is a fundamental skill in web design. This article will show you how to add images using basic HTML, CSS, and Bootstrap. We'll provide ready-to-use examples for easy integration into your projects.

Add an Image with Bootstrap

Bootstrap provides classes to make working with images easier. Here’s how to add a responsive image using Bootstrap:

class="img-fluid" makes the image responsive, scaling it nicely to the parent element.

        
            
          <img src="path/to/your-image.jpg" class="img-fluid" alt="Description of the image">
          
        
    

Add an Image with Basic HTML

The simplest way to add an image to your webpage is by using the tag in HTML.

How It Works:

• <img> is the HTML tag used to embed an image.
• src="path/to/your-image.jpg" specifies the path to the image file.
• alt="Description of the image" provides alternative text for the image, which is important for accessibility.

        
            
          <img src="path/to/your-image.jpg" alt="Description of the image">
          
        
    

Add an Image with CSS

You can also add images using CSS, which is useful for background images.

How It Works:

• background-image: url('path/to/your-image.jpg'); sets the background image for the <div>.
• background-size: cover; ensures the image covers the entire area of the container.
• background-position: center; centers the image within the container.

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

        
            
              .image-container {
              width: 200px;
              height: 200px;
              background-image: url('path/to/your-image.jpg');
              background-size: cover;
              background-position: center;
              }