Home >Web Front-end >CSS Tutorial >How to set background with css

How to set background with css

coldplay.xixiOriginal: 2021-04-15 16:29:2520488browse

How to set the background in css: 1. Use the [background-color] attribute to set a solid color for the element; 2. Use the [background-image] attribute to set the background image for the element; 3. The background attribute can be used in a Set all background properties in the declaration.

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

How to set the background in css:

1. Background-color attribute

The background-color attribute sets a value for the element A solid color. This color fills the element's content, padding, and border areas, extending to the outer bounds of the element's border (but not the margins). If the border has transparent parts (such as a dotted border), the background color will show through these transparent parts.

transparent value

Although in most cases it is not necessary to use transparent. However, if you don't want an element to have a background color, and you don't want the user's browser color settings to affect your design, then setting the transparent value is still necessary.

2. background-image attribute

The background-image attribute sets the background image for the element. An element's background occupies 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.

Depending on the value of the background-repeat property, the image can be tiled infinitely, tiled along an axis (x- or y-axis), or not tiled at all.

The initial background image (original image) is placed according to the value of the background-position attribute.

3. Background attribute

Background is a shorthand attribute that can set all background attributes in one statement.

You can set the following attributes:

background-color: Specifies the background color to be used.
background-position: Specifies the position of the background image.
background-size: Specifies the size of the background image.
background-repeat: Specifies how to repeat the background image.
background-origin: Specifies the positioning area of the background image.
background-clip: Specifies the drawing area of the background.
background-attachment: Specifies whether the background image is fixed or scrolls with the rest of the page.
background-image: Specifies the background image to use.

Note: Please set an available background color so that the page can get good visual effects even if the background image is not available.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
width: 400px;
height: 200px;
border: 1px solid red;
}
.demo1{
background-color: paleturquoise;
}
.demo2{
background-image: url(1.jpg);
background-size: 400px;
}
.demo3{
background:paleturquoise url(1.jpg) no-repeat;
background-size: 300px;
}
</style>
</head>
<body>
<div class="demo1">纯色背景</div>
<div class="demo2">图片背景</div>
<div class="demo3">纯色+图片背景</div>
</body>
</html>

Rendering:

How to set background with css

##Related learning recommendations:css tutorial

The above is the detailed content of How to set background with css. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set css fontNext article：How to set css font

See more

How to set background with css

Related articles