Add image to a HTML page in short using HTML or CSS

In this post, I will tell you the two methods, how you can add an image to your HTML page. Because without an image HTML page is very simple, basically we use the image to decorate and make our HTML page good looking also to attract people. One is by using HTML and another is by using CSS only.

Using HTML

Adding image on the HTML page using HTML is quit easy. Below is just one line of HTML code that can add image to a HTML page :

<img src="filename.jpg" alt="about image">

In this method, we are using the img tag with src attribute inside the body tag. The img tag specifies that an image in an HTML page. The img tag has two required attributes which are src and alt. We know that the images are not technically inserted into an HTML page, basically, we linked it to HTML pages.

The src attribute specifies the URL path of an image that we want to show on the web page. It can only be used when the input type is an image. The alt tag is used to specify the image or what the image is representing. And the main purpose of alt tag is to benefit those users who use screen readers when browsing.

Using CSS

Now we are going to add an image to our HTML page using CSS code. First, see the code snippet that is given below:



<!DOCTYPE html>
<html>
 <head>
  <style>
     body
      {
        margin:0;
        background:url(filename.jpg);
        background-repeat: no-repeat;
      }
  </style>
 </head>
 	<body>
 	</body>
</html>

In this method, we are just styling the body of our code with the help of internal styling. background:url() contains the address or the location of the image. background-repeat: no-repeat, we are using this so that image doesn’t repeat, it appears only once in the HTML page.

To know more about internal styling with an example you can go to the link given below:

How to make a Heart using only CSS

 

Also, read:

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *