Background-position and CSS Sprites usage

Background-position and CSS Sprites usage

The background-position attribute is frequently used. A large number of websites combine a large number of images into a Sprite to reduce the number of http requests. Sprite is used to determine the position of the image by controlling the value of the background-position attribute. It has to be said that its role is very important. Of course, apart from the use of Sprite, this attribute is often used in some other scenarios. This time, we will summarize its usage.

To do this, you must first sharpen the tool. Only by truly understanding the characteristics of background-position can you better use it in the desired scenario.

Definition of background-position

The background-position attribute sets the starting position of the background image.

This attribute sets the position of the original background image (defined by background-image). If the background image is to be repeated, it starts from this point.

Tip:

The background-position attribute sets the position of the original background image (defined by background-image), which means that you must set the background-image before using this attribute.

Attribute Value of background-position

Background-position has two attribute values: background-position: x | y. In usage, you can use either background-position-x or background-position-y.

There are three possible background-position attribute values.

　　

 

Tip:

The background-position attribute values can be mixed. For example, the direction value and value, value, and percentage are not the same type of attribute values on the X axis and Y axis, this also indicates that the background-position attribute can be derived from setting the background-position-x or background-position-y separately.

Magical percentage of background-position property values

We all know the role of the background-position attribute: Set the starting position of the background image. The starting position here is relative to the container. If the attribute value is a numerical value, you may understand it very well, for example: background-position: the value of 100px 50px indicates that the image is located at a position of 100px from the X axis of its container and 50px from the Y axis as the starting position of the image display.

　　

 

However, the attribute value is set by percentage. the starting position of the image is determined by the length and width of the container minus the length and width of the image multiplied by the percentage.

Formula: (container width/height-image width/height) x percentage

Example: background-position: 50% 50%

　　

 

Tip:

If the value of the background-position attribute is a numerical value, the distance relative to the container's own numerical value is used as the starting position. If the value is a percentage or a direction, the starting position is the value of x percentage relative to the container itself (the container's own width/height-the image's own width/height. If the attribute value of background-position is not set, the default start position is background-position: 0% 0%. The calculation method of the direction value and percentage is the same. They can be converted to each other, left: 0%, right: 100%, center: 50%. If the attribute value of background-position is set to only one, the other is set to center by default.

Sprite

CSS Sprite is also called CSS Sprites. It is a CSS image merging technique that combines small icons and background images into one image, then, use the background orientation of CSS to display the image to be displayed.

　　

 

The image above is composed of multiple small images, and the front-end is converted into a CSS sprite image.

Usage of the background-position attribute in sprites

After understanding the usage of the background-position attribute, it is much easier to learn how to use sprites. Before using Sprite, we need to know the positions of the icons in the sprite.

　　

 

From the above picture, it is not difficult to see the starting position of each small icon in the sprite. For example, the starting position of the first icon (skirt) in the Sprite is x: 0, y: 0. The starting position of the second icon (shoe) on the Sprite is x: 0, y: 50px, and the starting position of the third icon (Football) on the Sprite is x: 0, y: 100px, and so on, you can obtain the starting position of each image relative to Sprite.

The above Sprite is used as an example (the starting position of each small image in the actual Sprite is different from that shown above). A Demo is used to describe how to use it.

HTML

CSS

　　

 

Why is the attribute value of background-position negative when sprites are used?

The above example has explained how to use sprites, but beginners may be confused about the negative value of the background-position attribute in sprites. It is not difficult to answer this question. If you are careful, you should have discovered the root cause of using negative numbers very early. The preceding Demo is used as an example to analyze the problem. The preceding span label is a container with a length of 25 PX. When a background image is used, the initial position of the background image is filled with the entire container starting from the upper left corner of the container, however, the container size limits the size of the background image, which is hidden when the image size exceeds the container size. If you set background-position: 0 0, the background image is displayed at the starting position of the background image relative to the X axis = 0 of the container (span tag) and the Y axis = 0. So if you need to display the second icon in the container, it means that the X-axis direction of the Sprite is to move left, and the value of the image is to be moved left, that is, it will be set to a negative number, the same is true for the y-axis direction.