CSS background style

CSS background style

CSS background properties

Propertydescribe
backgroundShort attribute, which is used to set the background attribute in a declaration.
background-attachmentWhether the background image is fixed or scrolls with the rest of the page.
background-colorSets the background color of the element.
background-imageSet the image as the background.
background-positionSets the starting position of the background image.
background-repeatSet 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

Keywords: css3 html css

Added by AndyMoore on Mon, 20 Dec 2021 19:23:18 +0200