HTML Images

By | January 5, 2020

When we build a website, it takes many images. The structure of the web page is divided into HTML and each content is in a special tag, similarly the image also has a tag. <img> tag is used to add image to HTML.

<img src="url" alt="some-text">

The above sentence is first started on the <img> tag and the image URL in the src=”” tag comes.

Example:-

<h1>Image Example</h1>
<img src="shoes.jpg" alt="shoes">

Output:-

Put this code in your editor, then run it on the browser and see the result. If the source of the image is not found for some reason, then the content written in the alt=”shoes” tag in that condition will show on the browser.

Example:-

Images Style:-

In HTML when we source the image the image is big or small we can resize the image by styling it. We can style the image in two ways.

Example:-

<img src="Lion.jpg" alt="The Lion" width="300" height="300">
<img src="aardvark.jpg" alt="aardvark" width="250" height="150">
<img src="camel.jpg" alt="camel" width="200" height="200">

You can style the image by writing the style inside the image.

Example:-

<img src="Lion.jpg" alt="The Lion" style="width: 300px;height: 300px;">
<img src="aardvark.jpg" alt="aardvark" style="width: 250px;height: 150px;">
<img src="camel.jpg" alt="camel" style="width: 200px;height: 200px;">

HTML5 provides us with a tag <picture> in which we can source our image, this shows the user easily that the image is there.


<picture>
<img src="Lion.jpg" alt="The Lion" style="width: 300px;height: 300px;">
<img src="aardvark.jpg" alt="aardvark" style="width: 250px;height: 150px;">
<img src="camel.jpg" alt="camel" style="width: 200px;height: 200px;">
</picture>

In HTML we give image inside <img> tag but if you want to take image in background then we give something like this. First of all, we take a div, in which the image is to be given in the background and write the style inside it and give the image something like this.

<div style="background-image: url('https://cdn.shortpixel.ai/client/q_glossy,ret_img/Lion.jpg');"></div>
<div style="background-image: url('https://cdn.shortpixel.ai/client/q_glossy,ret_img/aardvark.jpg');"></div>

It is not necessary that we can image in the background of the div, we can place the tag or the content in which the background is to be placed.

<h2 style="background-image: url('https://cdn.shortpixel.ai/client/q_glossy,ret_img/shoes.jpg');">Heading background image.</h2>
Spread the love

Leave a Reply

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