CSS background

CSS Background

The CSS background property is used to define the background of HTML elements.

CSS properties define background effects:

background-color
background-image
background-repeat
##background-attachment

Background color##The background-color attribute defines the background color of the element.

The background color of the page is used in the body In the selector:

Example

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background-color:#b0c4de;
        }
    </style>
</head>

<body>

<h1>我的 CSS web 页!</h1>
<p>你好！这是来自php中文网的实例。</p>

</body>
</html>

Run the program to try it

In CSS, the color value usually starts with Define in the following way:

Hexadecimal - such as: "#ff0000"

RGB - such as: "rgb(255,0,0)"

Color name- For example: "red"

In the following example, h1, p, and div elements have different background colors:

Example

        <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1
{
	background-color:#6495ed;
}
p
{
	background-color:#e0ffff;
}
div
{
	background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>CSS background-color 实例!</h1>
<div>
改文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div>

</body>
</html>

Background-image

The background-image attribute describes the background image of the element.

By default, the background-image Perform tiled repeated display to cover the entire element entity.

Page background image setting example:

Example

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background-image:url('/upload/course/000/000/006/580837363b987802.jpg');
            background-color:#cccccc;
        }
    </style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

Background image - Tile horizontally or vertically

By default, the background-image property will tile the page horizontally or vertically.

Some images will look very inconsistent if they are tiled horizontally and vertically, as shown below:

Example

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background-image:url('/upload/course/000/000/006/58083b0ef203a172.jpg');
        }
    </style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

If the image is only tiled horizontally (repeat-x), the page background will be better:

Example

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background-image:url('/upload/course/000/000/006/58083a548d12a750.jpg');
            background-repeat:repeat-x;
        }
    </style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

Run the above program to try it

Background image - set positioning and non-tiled

Let the background image not affect the layout of the text

If you don’t want it To tile the image, you can use the background-repeat attribute:

        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background-image:url('/upload/course/000/000/006/58083c0089e20545.jpg');
            background-repeat:no-repeat;
        }
    </style>
</head>

<body>
<h1>Hello World!</h1>
<p>终于为那一身江南烟雨覆了天下，容华谢后，不过一场，山河永寂。</p>
<p>千秋功名，一世葬你，玲珑社稷，可笑却无君王命</p>
</body>

</html>

Run the program and try it

In the above example, the background image and text are displayed at the same position. In order to allow page layout To be more reasonable and not affect the reading of the text, we can change the position of the image.

You can use the background-position attribute to change the position of the image in the background:

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background-image:url('/upload/course/000/000/006/58083c0089e20545.jpg');
            background-repeat:no-repeat;
            background-position:right top;
            margin-right:200px;
        }
    </style>

</head>

<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>

</html>

Run the program and try it

Background-abbreviation attribute

In the above example we can see that the background color of the page is controlled by many attributes.

In order to simplify the code of these properties, we can merge these properties in the same property.

The abbreviation property of the background color is "background":

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background:#ffffff url('/upload/course/000/000/006/58083c0089e20545.jpg') no-repeat right top;
            margin-right:200px;
        }
    </style>

</head>

<body>
<h1>Hello World!</h1>
<p>终于为那一身江南烟雨覆了天下，容华谢后，不过一场，山河永寂。</p>
<p>千秋功名，一世葬你，玲珑社稷，可笑却无君王命</p>
</body>
</body>

</html>

Run the program Try it

When using the shorthand attribute, the order of the attribute values is::

background-color
##background- image
background-repeat
background-attachment
background-position

You don’t need to use all the above attributes, you can use them according to the actual needs of the page.

CSS background attribute

PropertyDescriptionbackgroundAbbreviation property, the function is to set the background property in a statement. background-attachmentWhether the background image is fixed or scrolls with the rest of the page. background-colorSet the background color of the element. background-image Set the image as the background. background-positionSet the starting position of the background image. background-repeatSet whether and how the background image repeats.

Next Section

new file

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>php中文网(php.cn)</title>
 <style>
 body
 {
 background-image:url('https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg');
 background-color:#cccccc;
 }
 </style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

submit Reset Code

Automatic operation

Full Screen