Background Stretch

#	Content	Views
1.	Tutorial Tags	37,059
2.	Tutorial + Programming	1,061,895
3.	Videos	353,249
4.	Results (`Annual + Re-appear`)	44,869
5.	Quiz Chapters	37,081
6.	Quiz Questions	540,077
7.	Quiz Results	29,742
8.	Testimonials	7,594
9.	Projects	33,794
10.	e-Words	22,245
11.	e-Certificates	4,968
12.	Downloads (Softwares)	121,477
13.	Downloads (Syllabus)	2,638

Home
HTML
Images
Background Stretch

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!

#CSS #HTML #background #image #Stretch

CSPunjab.Com

Background Stretch

« Previous

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!