How to add the image in HTML?

in this article, we will learn how to add an image in HTML. the syntax of adding an image in HTML is the same whether it reacts or another technology.

<img/> is used to add images in HTML. you have to use the image tag and give the correct image URL in src to load or insert the image in HTML.

<img src="" height="" width="" alt=""/>

for example, if my image is in a D/img folder named profile.png then the image src will be file:///D:/img/profile.png

How to insert an image in html from a folder

To insert an image in html from a folder you will have to just provide the address of the image file in the src attribute of the <img/> tag.

How to add background image in HTML

If you want to add a background image in HTML, there may be two methods either you can use img tag in HTML or css background image.

    
<style>
      .banner {
        height: 400px;
        width: 400px;
        max-width: 100%;
        border: 2px solid teal;
        position: relative;
      }
      .banner img {
        height: 100%;
        width: 100%;
        position: absolute;
      }
</style>
<div class="banner">
      <img
    src="https://cms.frontendzone.com/wp-content/uploads/2024/02/how-to-be-frontend-developer.png"
      />
    </div>

how to add the image in CSS

To add the image in CSS, you can use the background image property.

output :

way to add images in CSS

    
<style>
      .banner {
        height: 400px;
        width: 400px;
        max-width: 100%;
        background:url('https://cms.frontendzone.com/wp-content/uploads/2024/02/how-to-be-frontend-developer.png')

      }
  
</style>
<div class="banner">
    </div>