How to use the background property in Css

Editor to share with you how to use the background attributes in Css, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. The background includes background color and background image.

Background color: using a single color as the background

Background image: with the picture as the background, with a gradient as the background

1. Background color

Attribute: background-color: color valu

2. Background picture

Attribute: background-image

Value: url (image path)

Background-image:url ("images/logo.png")

Background-image:url ('images/logo.png')

Background-image:url (images/logo.png)

3. Repetition of background

Attribute: background-repeat:

Value:

Repeat: default, tiled vertically and horizontally

Repeat-x: tiling horizontally only

Repeat-y: tiling vertically only

No-repeat: not tiled, displayed only once

4. Background picture size

Attribute: background-size

Value: value1 value2: width, height or value% value2%: percentage

Cover: enlarge the background image so that the background image completely covers the background area until it hits the last edge

Contain: enlarge the background image and stop when it hits the first edge

5. The background image is fixed

Attribute: background-attachment

Value: scroll means default, and scrolling positioning fixed means fixed positioning.

6. Background location

Where in the area is the background image displayed?

Attribute: background-position

Value: X% y%: horizontal position, vertical position or x y: horizontal position, vertical position

X is positive, move to the right

X is negative, move to the left

Y is positive, move down

Y is negative, move up

Left right top bottom

Center: centered (xQuery y)

X: available values are left, right, center

Y: available values are top, bottom, center

Background-position:left top

Background-position:center

Common methods:

1. Create an element that is the same size as the icon to be displayed

2. Set the background image for the created element (large background image)

3. Move the picture to the specified location through background-position

The above is all the content of the article "how to use background attributes in Css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!