HTML
Images
HTML Images Syntax
● The HTML <img> tag is used to embed an image in a web page.
● Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a holding space for the
referenced image.
● The <img> tag is empty, it contains attributes only, and does not
have a closing tag.
● Syntax
<img src="url" alt="alternatetext">
Attributes of Image tag
The <img> tag has two required attributes:
● “src” - The required src attribute specifies the path (URL) to the
image.
● “alt” - The required alt attribute provides an alternate text for an
image, if the user for some reason cannot view it (because of slow
connection, an error in the src attribute, or if the user uses a screen
reader).
● The value of the alt attribute should describe the image.
Image Size - Width and Height
● You can use the CSS style attribute to specify the width and height
of an image.
<img src="img_girl.jpg" alt="Girl in a jacket"
style="width:500px;height:600px;">
● Alternatively, you can use the width and height attributes:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500"
height="600">
● The width and height attributes always define the width and height
of the image in pixels.
➔ Animated Images
HTML allows animated GIFs:
<img src="programming.gif" alt="Computer Man"
style="width:48px;height:48px;">
➔ Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Image Floating
Use the CSS float property to let the image float to the right or to the
left of a text:
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Background Image on a HTML element
● To add a background image on an HTML element, use the HTML
style attribute and the CSS background-image property:
<p style="background-image: url('img_girl.jpg');">
● You can also specify the background image in the <style> element,
in the <head> section:
<style>
p {
background-image: url('img_girl.jpg');
</style>
Background Image on a Page
If you want the entire page to have a background image, you must
specify the background image on the <body> element:
<style>
body {
background-image: url('img_girl.jpg');
</style>
Background Repeat
● If the background image is smaller than the element, the image will repeat itself,
horizontally and vertically, until it reaches the end of the element:
● To avoid the background image from repeating itself, set the background-repeat
property to no-repeat.
<html> </head>
<head> <body>
<style> <h2>Background No Repeat</h2>
body { <p>You can avoid the image from
being repeated by setting the
background-image: background-repeat property to
url('example_img_girl.jpg'); "no-repeat".</p>
background-repeat: no-repeat; </body>
} </html>
</style>
Background Cover
● If you want the background image to cover the entire element, you can set
the background-size property to cover.
● Also, to make sure the entire element is always covered, set the
background-attachment property to fixed:
● This way, the background image will cover the entire element, with no
stretching (the image will keep its original proportions):
● <style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Background Stretch
If you want the background image to stretch to fit the entire element, you can set the
background-size property to 100% 100%
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
</style>
