CSS background-position background image position

 CSS background-position is used to define the position of the background image. It is one of the attributes of CSS background . It is often designed with background-image and background-repeat , so that the background image of the webpage is displayed on the top, bottom, left, right or even center. When you need to use the horizontal and vertical positions, you can give numbers, percentages, or orientation parameters to make the picture appear in the correct position. background-position is a standard CSS background position design method. All major browsers support background-position. .

CSS background-position basic syntax

background-position: background image horizontal position parameter background image vertical position parameter;

Usually a combination of horizontal and vertical directions is used to define the position of the background image. For example, "background-position: left top;" means that the background image is aligned to the upper left corner. In addition, you can also use the "left and top distance" and "left and top percentage" to design, example Will explain in detail.

Direction parameters that can be used

direction	parameter
horizontal direction	left-align left, center-align center, right-align right
Vertical direction	top-top alignment, center-center alignment, bottom-bottom alignment

CSS background-position example 1. Various alignments

background-position:right bottom; // align right and bottom
background-position: 30px 60px; // position 30px to the left and 60 px above
background-position: 10% 50%; // position 10% to the left and top 50 % Position
background-position: 10%; // The effect is the same as the previous line, 10% to the left and 50% to the top

To ensure correct display of the above example, you need to use background-repeat:no-repeat to tell the browser not to display the background image repeatedly. Special attention should be paid to the fact that if you use the simplified writing method, only write one attribute value, and the other attribute value will automatically take the middle value. For future management convenience, it is better to write the attribute values ​​in both directions.

CSS background-position example two, vertical center alignment

body{
　background-image:url('background image'); //First give the path or URL of the image you want to put in the background
　background-repeat:no-repeat; //Do not display the background image repeatedly (display only once)
　background-attachment:fixed; //The position of the background image is fixed
　background-position:center; //The horizontal and vertical positions of the background image are aligned to the center
}

Vertical centering is a special way of writing. You only need to write an attribute value center, because the other direction will automatically take the middle value. The main reason for the example setting the position of the background image to be fixed (background-attachment:fixed) is that the background image will not be moved when the mouse is swiped up and down, but this effect is only applicable to web page backgrounds or textarea In web page elements, it doesn't make much sense to use it in the DIV block. In addition, background-position is not only used to design the position of the background image of the webpage, but also can be used to design the position of the background image in the DIV block. The usage is the same.