Home > Article > Web Front-end > How to use the background-image attribute
How to use the background-image attribute
- 青灯夜游Original
- 2019-02-18 11:48:3024510browse
The background-image attribute is used to set one or more background images of the element, separated by commas (,).
CSS background-image property
Function:background-image property Sets a background image for the element.
Syntax:
background-image:url(图片路径)
Description: The background image set by the background-image attribute will occupy the entire size of the element, including padding and Borders, but not margins. By default, the background image is placed in the upper left corner of the element and repeats horizontally and vertically.
Tips: Please set an available background color, so that if the background image is not available, you can use the background ribbon instead.
CSS background-image property usage example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#example1 {
background-color:#cccccc;
background-image:url("https://img.php.cn/upload/article/000/000/024/5c6a290265dba776.gif"),url("https://img.php.cn/upload/article/000/000/024/5c6a2793a13ac244.gif");
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Hello World!</h1>
<p>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p>
<p>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p>
</div>
</body>
</html>Rendering:
The above is the entire content of this article, I hope it will be helpful to everyone's study.
The above is the detailed content of How to use the background-image attribute. For more information, please follow other related articles on the PHP Chinese website!