CSS background
CSS Background
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-position
Background color
The background-color property defines the background color of the element.
In CSS, color values are usually defined in the following way:
Hexadecimal - such as: "#ff0000"
RGB - such as: "rgb(255,0,0)"
Color name - such as: "red"
In the following example, the h1, p, and div elements have different background colors:
<!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>静夜思</h1>
<div>
床前明月光，
<p>疑是地上霜。</p>
举头望明月，
<p>低头思故乡。</p>
</div>
</body>
</html>Background image
The background-image attribute describes the background image of the element.
By default, the background image is displayed tiled and repeated to cover the entire element entity.
Page background image setting example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片背景测试</title>
<style>
body
{
background-image:url('http://pic.58pic.com/58pic/14/94/21/80U58PICPJM_1024.jpg');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>明天你好！！</h1>
</body>
</html>Background image - horizontal or vertical tiles
By default, the background-image attribute will tile the page horizontally or vertically.
If some images are tiled horizontally and vertically, it will look very inconsistent, as shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片背景测试</title>
<style>
body
{
background-image:url('http://img01.taopic.com/141002/240423-14100210124112.jpg');
}
</style>
</head>
<body>
<h1>明天你好！！</h1>
</body>
</html>If the image is only tiled horizontally (repeat-x), If the image is only tiled horizontally (repeat-y).
Background image - set positioning and non-tiled
Let the background image not affect the layout of the text
If you don’t want the image to be tiled, you can use the background-repeat attribute:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片背景测试</title>
<style>
body
{
background-image:url('http://img01.taopic.com/141002/240423-14100210124112.jpg');
background-repeat:no-repeat
}
</style>
</head>
<body>
<div>
<h1>明天你好！！</h1>
</div>
</body>
</html>In the above example, the background image and text are displayed at the same position. In order to make the page layout more reasonable and not affect the reading of the text, we can change the position of the image.
You can use the background-position property to change the position of the image in the background
background-position:right top;
Background-abbreviation property
above In the 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 combine these properties in the same property.
The abbreviation property of the background color is "background":
When using the abbreviation attribute, the order of 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.
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
