Home >Web Front-end >CSS Tutorial >What are the background-related attributes in css? Introduction to css background properties

What are the background-related attributes in css? Introduction to css background properties

不言Original: 2018-08-18 13:45:055507browse

What are the related attributes of css background? The following article will introduce you to the CSS background properties. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. The css background attribute sets the background color for the content: background-color;
Attribute:
color;
inherit; inherit the parent style

box.html

<!doctype html>
<html>
<head>
    <mate charset="utf-8">
    <title>背景</title>
    <link href="box.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <p为内容设置背景色：background-color；</p>
    </body>
    </html>

box.css

body{    
background-color:#123456;
}

2. The css background attribute sets the background to the image background-image for the content. ：url();
box.css

body{
    background-color:#123456;    
    background-image:url(image.png);
    }

3. Fixed background image background-attachment of css background attribute
(use background-attachment in CSS The attribute can fix the image on the browser. If you drag the scroll bar, the background image will not scroll with the scrolling of the web page content, like text floating on the image)
Attribute value:
scroll;The background image will scroll with Content scrolling, default value
fixed; The background image is fixed and does not scroll with the content
inherit;Inherit the parent class style

box.css

body{
    background-color:#123456;    
    background-image:url(image.png);    
    background-attachment:fixed;    
    font-size: 45px;
    }

4, css background attribute Background image tile background-repeat;
Attribute value:
Repeat;Tile background image;Default
No-repeat;Do not tile images;
Repeat-x;Tile horizontally
repert-y; Tile in the vertical direction

box.css

 body{
     background-color:#123456;    
     background-image:url(image.png);    
     background-attachment:fixed;    
     font-size: 45px;    
     background-repeat: repeat-y;    
}

5. CSS background attribute background image positioning background-position
Attribute value:
top;Top
center;Middle
bottom;Bottom
right;Right
left;Left
inherit;Inherit parent style
Style:
xxxpx,xxxpx;
xxx%,xxx%;
xxxpx,top;

box.css

body{
    background-color:#123456;    
    background-image:url(image.png);    
    background-attachment:fixed;    
    font-size: 45px;    
    background-repeat:no-repeat;    
    background-position:left;
    }

Related recommendations:

CSS background you don’t know—Full solution to css background properties

Detailed explanation of css background property

The above is the detailed content of What are the background-related attributes in css? Introduction to css background properties. 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：What are the css text attributes? Introduction to css text propertiesNext article：What are the css text attributes? Introduction to css text properties

See more

What are the background-related attributes in css? Introduction to css background properties

Related articles