HTML Tutorials

#	Content	Views
1.	Tutorial Tags	15,807
2.	Tutorial + Programming	678,585
3.	Videos	218,834
4.	Results (`Annual + Re-appear`)	12,696
5.	Quiz Chapters	14,622
6.	Quiz Questions	172,771
7.	Quiz Results	18,822
8.	Testimonials	3,462
9.	Projects	28,285
10.	e-Words	12,023
11.	e-Certificates	4,968
12.	Downloads (Softwares)	4,237
13.	Downloads (Syllabus)	948

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:

Example

Add a background image on a HTML element:

You can also specify the background image in the <style> element, in the <head> section:

<!DOCTYPE html>
<html>
<head>
<title>Background Image</title>
</head>
<body>

<h2>Background Image</h2>

<p>You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #image #background image

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:

Example

Add a background image for the entire page:

<!DOCTYPE html>
<html>
<head>
<title>Background Image on a Page
</title>
</head>
<body>

<h2>Background Image on a Page
</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>

</body>
</html>

Live Demo & Try it yourself!

#CSS #HTML #image #background image

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:

<!DOCTYPE html>
<html>
<head>
<title>Background Repeat</title>
</head>
<body>

<h2>Background Repeat</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>

</body>
</html>

Live Demo & Try it yourself!

#CSS #HTML #image #background repeat

Background No Repeat

To avoid the background image from repeating itself, set the background-repeat property to no-repeat.

<!DOCTYPE html>
<html>
<head>
<title>Background No Repeat</title>
</head>
<body>

<h2>Background No Repeat</h2>

<p>You can avoid the image from being repeated by setting the background-repeat property to "no-repeat".</p>

</body>
</html>

Live Demo & Try it yourself!

#CSS #HTML #background #image #no repeat

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):

<!DOCTYPE html>
<html>
<head>
<title>Background Cover</title>
</head>
<body>

<h2>Background Cover</h2>

<p>Set the background-size property to "cover" and the background image will cover the entire element, in this case the body element.</p>

</body>
</html>

Live Demo & Try it yourself!

#CSS #HTML #image #background 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%:

Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.

<!DOCTYPE html>
<html>
<head>
<title>Background Stretch</title>
</head>
<body>

<h2>Background Stretch</h2>

<p>Set the background-size property to "100% 100%" and the background image will be stretched to cover the entire element, in this case the body element.</p>

</body>
</html>

Live Demo & Try it yourself!