Image Tag in HTML

Images are inserted into the web page using links or paths of the image’s location. The image tag is represented as <img> in HTML.

src — Specifies the path to the image. src can be a link or a file location of an image.

alt — Specifies an alternate text for the image, in case the image can not be displayed or not found the alternate text will be displayed.

<img src=”https://images.unsplash.com/photo-1565945887714-d5139f4eb0ce" alt=”photo” class=”photo” />

<img>-Defines an image

<map>-Defines an image map

<area>-Defines a clickable area inside an image map

<picture>-Defines a container for multiple image resources

We can specify the size of an image using width and height attributes.

When the image specified in src is not found it displays the text given within the alt attribute as shown below.

<div class=”images”>

<img height=”350" width=”350" src=”https://images.unsplash.com/photo-1565945887714-d5139f4eb0ce" alt=”photo” class=”photo” />

</div>

<style>

.images{

margin-top: 150px;

margin-left: 450px;

}

</style>

We can align the position of the image using margin-top,margin-right, and margin-left attributes. The size is specified in the form of pixels, rem, inches, integer values, millimetre, points, centimetres or percentages etc..,

The float attribute is also used to specify the position of the image. It takes right, left, none, inline-end, inline-start, initial and inherit as its value.

To set an image as a background, we can assign the path of the image to the background-image attribute also.

<style>
body {
background-image: url(‘https://images.unsplash.com/photo-1565945887714-d5139f4eb0ce’);
}
</style>

We can avoid the repetition of images by setting the value of background-repeat as no-repeat.

body {

background-image: url(‘https://img.freepik.com/free-photo/chicken-wings-barbecue-sweetly-sour-sauce-picnic-summer-menu-tasty-food-top-view-flat-lay_2829-6471.jpg');

background-repeat: no-repeat;

}

Thank you for Reading!!