Summary of Background-position property usage in CSS

backgroundproperty is one of the most common properties in CSS, and to implement a CSS cutout, you only need to use one property: Background-position. Background-position is the position used to control the background image of an element. The trick is to actually specify the position of the upper-left corner of the picture relative to the upper-left corner of the element. It accepts three kinds of values: keywords, such as top, right, bottom, left, and center; length values, such as PX, EM, REM, etc.; percent percent. Let's talk about the usage of the Background-position attribute in the following section.

First, you can learn the free course of PHP Chinese network.

1. Learn the CSS Background Chapter course in the CSS 0 Basics Primer Tutorial

2. Watch the background and margin video courses in the Dark Horse Programmer's CSS video tutorial

Background-position Property Usage

1. CSS Background-position Properties

The Background-position property sets the starting position of the background image.

This property sets the position of the background image (defined by Background-image), and the background image will start at this point if it is to be repeated.

Tip: You need to set the Background-attachment property to "fixed" to ensure that the property works correctly in Firefox and Opera.

2. Background-position percent principle

For background-size:100% Auto, it means that the background image width is *100% to the width of the element, and the height is scaled. Details can be seen CSS3 background.

For background-position It is natural to think that percentages are based on the width of the parent element, but Background-position really is not, it has its own principle.

3. Use of background-position in CSS

Two values the front one is the horizontal positioning, which we call the x-axis orientation. The latter value is the longitudinal orientation, which we call the y-axis orientation. If there is only one value, the default is the x-axis direction, At this point the y-axis is the default alignment, which is center.

4. CSS uses the Background-position property to complete the sprite diagram code

Sprite is a CSS sprite, some call it CSS Wizard, is a CSS image merging technology, is to combine a number of small icons into a picture, and then use the CSS background-position to display the need to display the part.

It can reduce the number of requests to the server when loading webpage picture, improve the loading speed of the page, and solve the phenomenon of flashing white when the IE6 mouse is out of date.

5. Background series of background-position you don't know

We know that background-position is used to specify the offset value of the background image, allowing a graph to unfold from a specific position. CSS Sprites is the expectation of merging HTTP requests by stitching multiple small graphs into a larger image and then using Background-position to specify the area to display.

Related questions

1. Background-position the picture will have a border to not fall

2.background-position use doubts.

3. Question on the percentage of background-position?

"Recommended"

1. PHP Chinese Web free Tutorial: CSS online Manual

2. PHP free Video tutorial: "Learn HTML video tutorial in the blink of an finger"

3. PHP Chinese Web free video tutorial: "Php.cn lonely Nine Cheap (2)-css video Tutorial"