In the previous chapter, we learnt how to embed an image in an HTML document.
In this chapter, we will learn how to set the background image for an HTML element.
While designing websites, we come across situations where we need to have an image as a background.
The CSS background-image property in the style attribute can set the background of almost any HTML element with an image.
Let's see the syntax using inline CSS.
<tag style="background-image: url('URL_of_Image');">content</tag>
Here we only need to provide the URL of the image in the CSS background-image property.
Let's take the example of setting the background image for the <body> element.
<body style="background-image: url('trees.jpg');">
<!DOCTYPE html>
<html>
<head>
<title>HTML Body Background Image Example</title>
</head>
<body style="background-image: url('trees.jpg');">
<h1>HTML Body Background Image Example</h1>
<p>Body element has been specified with a background image.</p>
</body>
</html>
Note that when we set the background image on <body> element, the entire web page will have that background.
We can also specify the background image of an element using the <style> element in internal CSS. See the example below.
<style>
body {
background-image: url('trees.jpg');
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>HTML Body Background Image Using Style Element Example</title>
<style>
body {
background-image: url('trees.jpg');
}
</style>
</head>
<body>
<h1>Body Background Image Using Style Element</h1>
<p>We have specified the background image in head section using style element.</p>
</body>
</html>
p Background Image
Using CSS background-image property, we can set element <p> background image as follows:
<style>
p {
background-image: url('trees.jpg');
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>p Background Image Example</title>
<style>
p {
background-image: url('trees.jpg');
}
</style>
</head>
<body>
<h1>p background Image Example</h1>
<p>We have specified<br> the background image for<br> paragrah in head section using style element.<br>
We can also use<br> style attribute for setting<br> background image.</p>
</body>
</html>
Background Repeat
The browser automatically repeats the background image horizontally and vertically if it is smaller than the element. It repeats till the end of the element.
Let's see an example. Click on ''Result on Editor' to view the output.
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Image Repeat Example</title>
</head>
<body style="background-image: url('othertrees.jpg');">
<h1>HTML Background Image Repeat</h1>
<p style="color:red;">As the size of the image is smaller than the body element,
the image is automatically repeating itself horizontally and vertically till the end of the element reaches.</p>
</body>
</html>
We can force the browser not to repeat the background image by specifying the CSS background-repeat property to no-repeat.
The HTML code for the same is as follows:
<body style="background-image: url('othertrees.jpg'); background-repeat:no-repeat;">
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Image No Repeat Example</title>
</head>
<body style="background-image: url('othertrees.jpg'); background-repeat:no-repeat;">>
<h1>HTML Background Image No Repeat</h1>
<p style="color:red;">Here we notice that though the size of the background image is small, it is not repeating itself.</p>
</body>
</html>
Background Size
The size of the background image is specified by the CSS background-size property.
This property can take one of the following values:
1. length
A length value, such as 200px or 50%, which sets the width and height of the background image in pixels or percentages.
<style>
body {
background-image: url('trees.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200px 200px;
}
</style>
If background-attachment: fixed is applied to an element, the background image will stay fixed in place, even if the page is scrolled.
<!DOCTYPE html>
<html>
<head>
<title>Background Image Size by Length Example</title>
<style>
body {
background-image: url('trees.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200px 200px;
}
</style>
</head>
<body>
<h1>Background Image Size by Length</h1>
<p style="color:red;">We have set width and height of the background image to 200 px in CSS background-size property. Change the size and see the difference.</p>
</body>
</html>
If we set the background-size to 100% 100%, the background image is stretched.
See example.
<!DOCTYPE html>
<html>
<head>
<title>Background Image Stretch Example</title>
<style>
body {
background-image: url('trees.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
<h1>Background Image Stretch Example</h1>
<p style="color:red;">We have set width and height of the background image to 100% in CSS background-size property. This stretches the image to fill the element.</p>
</body>
</html>
2. cover
It scales the background image to cover the entire element while preserving the image aspect ratio.
Due to this, some parts of the image are cut off.
<style>
body {
background-image: url('trees.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>background-size: cover</title>
<style>
body {
background-image: url('trees.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<h1>background-size: cover</h1>
<p style="color:red;">Here the CSS background-size property is set to 'cover'.<br> The browser scales the image by maintaining its aspect ratio. <br>Due to this you may notice that some parts of image are not visible.</p>
</body>
</html>
3. contain
It scales the background image to the largest size such that both its width and height fit inside the element.
This may cause blank space to be displayed around the image.
<style>
body {
background-image: url('trees.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: contain;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>background-size: contain</title>
<style>
body {
background-image: url('othertrees.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: contain;
}
</style>
</head>
<body>
<h1>background-size: contain</h1>
<p style="color:red;">Here the CSS background-size property is set to 'contain'.<br> The browser scales width and height of the background image such that it fits in the element. Due to this you may notice blank space near the image.</p>
</body>
</html>