How to use the background-image attribute-CSS Tutorial-php.cn

How to use the background-image attribute

青灯夜游

Release： 2019-02-18 11:55:23

Original

24592 people have browsed it

The background-image attribute is used to set one or more background images of the element, separated by commas (,).

How to use the background-image attribute

CSS background-image property

Function:background-image property Sets a background image for the element.

Syntax:

background-image:url(图片路径)

Copy after login

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>

Copy after login

Rendering:

How to use the background-image attribute

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!