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