This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size.
Smartphone icons created by Freepik - Flaticon
A background image can be specified for almost any HTML element.
To add a background image on an HTML element, use the HTML attribute and the CSS property:
Add a background image on a HTML element:
<div style="background-image: url('img_girl.jpg');">
You can also specify the background image in the element, in the section:
Specify the background image in the element:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
If you want the entire page to have a background image, you must specify the background image on the element:
Add a background image for the entire page:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
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:
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
To avoid the background image from repeating itself, set the property to .
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
If you want the background image to cover the entire element, you can set the property to . Also, to make sure the entire element is always covered, set the property to : 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;
}
</style>
If you want the background image to stretch to fit the entire element, you can set the property to :
Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
From the examples above you have learned that background images can be styled by using the CSS background properties. To learn more about CSS background properties, study the CSS Background Tutorial.