CSS background position

If you set a background position using pixels, the top-left corner of the image is positioned from the top-left corner of the element by the specified number of pixels. with percentage positioning, It is the corresponding point on the image that gets positioned. so if you set a vertical and horizontal position of 20 percent, you are actually positioning a point 20 percent from the top left of the image, 20 percent from the top left of the parent element (see figure 7-14 ).

In CSS, if you use pixels to set the background position, the upper left corner of the image is displayed starting from the specified pixel value. If percent positioning is used, the image and the container are located at the same point. For example, if you set both the upper and lower sides of the background to 20%, it is equivalent to 20% of the image as the starting point and located at 20% of the container. (7-14)

This is very useful as it allows you to create background images with the same horizontal proportions as your layout, and then position them where you want the columns to appear.

This is very useful. It allows the image to overlap with the specified position of the container and locate the image at any position.