HTML Images

What is an HTML Images?

HTML Images tag is used to link images in a webpages.
<img> tag is used to link images.
This tag contains only src & alt attributes, it is an empty tag and does not have a closing tag.

Example


<img src="mickey-mouse.jpg" alt="Mickey Mouse">

Try It »

src - Use to define the path of image.
alt - Use to define the alternate text of an image.

Background Images

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

Example


<p style="background-image: url('mickey-mouse.jpg'); width:100%; height:500px"> There is image in Background</p>

Try It »

In the above example, the background images going to repeat according to the space.
background-size property use to cover the background image.
background-repeat property use to stop repeating image in the background.

Example


<p style="background-image: url('mickey-mouse.jpg'); background-repeat: no-repeat; background-size: cover; width:100%; height:500px"> There is image in Background</p>

Try It »

Picture Tag

The HTML <picture> tag is used to display different pictures for different devices or screen sizes.

Example


						 <h2>Picture Tag</h2>

						<picture>

						<source media="(min-width: 650px)" srcset="mickey-mouse.jpg">

						<source media="(min-width: 465px)" srcset="donald-duck.jpg">

						<img src="disney-logo.jpg" style="width:auto">

						</picture>
						<p>Resize the screen to see the effect. </p>

Try It »