A background image can be specified for almost any HTML element.
To add a background image on an HTML element, use the HTML style
attribute and the CSS background-image
property:
Add a background image on a HTML element:
<p style="background-image: url('img_girl.jpg');">
Try it Yourself »
You can also specify the background image in the <style>
element, in the <head>
section:
Specify the background image in the <style>
element:
<style>
p {
background-image: url('img_girl.jpg');
}
</style>
Try it Yourself »
If you want the entire page to have a background image, you must specify the background image on the <body>
element:
Add a background image for the entire page:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Try it Yourself »
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
.
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Try it Yourself »
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;
}
</style>
Try it Yourself »
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.
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Try it Yourself »
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 our CSS Background Tutorial.
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!