CSS background style
CSS background properties
| Property | describe |
|---|---|
| background | Short attribute, which is used to set the background attribute in a declaration. |
| background-attachment | Whether the background image is fixed or scrolls with the rest of the page. |
| background-color | Sets the background color of the element. |
| background-image | Set the image as the background. |
| background-position | Sets the starting position of the background image. |
| background-repeat | Set whether and how the background image is repeated. |
background color
The background color attribute defines the background color of the element
The background color of the page is used in the selector of the body:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
body
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>my CSS web page!</h1>
<p>Hello world! This is from https://blog. csdn. net/qq_ 47897078? Type = instance of blog</ p>
</body>
</html>
In CSS, color values are usually defined in the following ways:
- Hexadecimal - for example: "#ff0000"
- RGB - for example: "rgb(255,0,0)"
- Color name - e.g. "red"
In the following examples, h1, p, and div elements have different background colors:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
The text is inserted in the div Element.
<p>The paragraph has its own background color.</p>
We are still in the same place div Yes.
</div>
</body>
</html>
background image
The background image attribute describes the background image of the element
By default, the background image is tiled and repeated to cover the entire element entity
Page background picture setting example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
body
{
background-image:url('https://static.runoob.com/images/mix/paper.gif');
background-color:red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
The following is an example of a bad combination of text and background images. Poor text readability:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
body {background-image:url('https://static.runoob.com/images/mix/bgdesert.jpg');}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>The text is not easy to read.</p>
</body>
</html>
Background image - tile horizontally or vertically
By default, the background image property is tiled horizontally or vertically on the page.
If some images are tiled horizontally and vertically, it looks very inconsistent, as shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
body
{
background-image:url('gradient2.png');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
If the image is only tiled horizontally (repeat-x), the page background will be better:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
body
{
background-image:url('https://static.runoob.com/images/mix/gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Background image - set positioning and non tiling
Let the background image not affect the typesetting 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>demo</title>
<style>
body
{
background-image:url('img_tree.png');
/*background-repeat:repeat;*/
/*background-repeat:repeat-x;*/
background-repeat:repeat-y;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>runoob Example of background picture.</p>
<p>The background picture is displayed only once,But it bothers readers!</p>
</body>
</html>
In the above example, the background image and the text are displayed in 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 attribute to change the position of the image in the background:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
body
{
background-image:url('https://static.runoob.com/images/mix/img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Background picture is not repeated, setting position example.</p>
<p>The background image is displayed only once and separated from the text.</p>
<p>The instance is also added margin-right Property is used to space text from a picture.</p>
</body>
</html>
Background - short attribute
In the above example, we can see that the background color of the page is controlled by many properties.
To simplify the code for these attributes, we can combine these attributes in the same attribute
The abbreviated attribute of background color is "background":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
body
{
background:#ffffff url('https://static.runoob.com/images/mix/img_tree.png') no-repeat right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>The background picture is displayed only once,But it is far from the text.</p>
<p>In this example, we added a right margin,So the background image won't disturb the text.</p>
</body>
</html>
When using abbreviated attributes, the order of attribute values is:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
All the above attributes need not be used. You can use them according to the actual needs of the page
Hello World!
The background image is displayed only once, but it is far from the text.
In this example, we added a right margin, so the background image won't disturb the text.
```When using abbreviated attributes, the order of attribute values is:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
All the above attributes need not be used. You can use them according to the actual needs of the page