Coordinate location of background images

In fact, if the Image Tag is not invented, there may be no web designer profession.

HoweverThe abuse of tags may lead to the modification-only image to mess up the page. Fortunately, CSSThis allows us to display images on pages without making them part of the markup. The method is to add an image as the background to an existing element.

Background Image basics:

By default, the browser repeatedly displays the background image vertically and horizontally, so that the image is tiled throughout the page.

Gradient effect:Currently, the gradient is very fashionable. You may want to apply the vertical gradient on the page. Therefore, you need to create a very high but narrow gradient image and then apply the image to the page body, and horizontal tile.

Because the height of the gradient image is fixed, if the length of the page content exceeds the image height, the gradient will suddenly stop. The solution is to add a background color becauseThe background image always appears on the background color.When the image ends, the background color is displayed.

 TIPS:

1. Set an empty Div, set its ID, and set the DIV size to be the same as that of the image. The image is applied as its background and specified to be unique.
2. Set the location of the background image(Attribute name: Background-Position)For example, background-position: left center; (UseKeywords). You can also use pixels or percentages.UnitSet the image position. However, you must use pixels to set the background position. The distance from the upper left corner of the image to the upper left corner of the element is the specified number of pixels. However, the percentage is not used to locate the upper-left corner of the background image, but to use a corresponding point on the image. Therefore, if the specified vertical and horizontal positions are both 20%, in fact, the image is located at 20% points (corresponding points on the image) from the top left corner of the image to 20% points from the top left corner of the parent element.(To put it bluntly, you can find the positions at and then overlap them. For more information, see the text below ).

Suggestion: it is best not to mix keywords and units.

1. Background-position: 0 0;

The upper left corner of the background image is aligned with the upper left corner of the container element. This setting correspondsBackground-position: Left top;OrBackground-position: 0% 0%;The set effect is consistent.

2. This attribute is not affected by the object's patch attribute (padding) settings.

For example, if we add a padding value to the container element, the upper left corner of the background image is still aligned with the upper left corner of the container element. In this case, only the height and width of the container elements are affected.

There are many methods to provide values for the background-position attribute. First, you can useKeywords: Top, bottom, left, right, and center. These keywords are usually paired, but they are not always the same. You can also useLength Value, Such as 100px or 5 cm, you can also usePercentage. The placement of different types of values varies slightly with the background image.

 

Keywords:

The keyword of image placement is the easiest to understand, and its function is indicated by its name. For example, top right places the image in the upper right corner of the element padding area.

According to the standard, the location keyword can appear in any order, as long as there are no more than two keywords-One corresponding to the horizontal direction and the other object vertical direction.

If only one keyword is displayed, the other keyword is considered to be center by default.

Therefore, if you want an image above the middle of each section, you only need to declare the following:

P {

Background-image: url('bgimg.gif ');

Background-repeat: No-Repeat;

Background-position: top;

}

The following are equivalent location keywords:

Single keyword	Equivalent keywords
Center	Center
Top	Top center or center top
Bottom	Bottom center or center bottom
Right	Right Center or center right
Left	Left center or center left

 

 

Percent value:

The expression of the percentage value is more complex. Suppose you want to center the image in its element with a percentage value, which is easy:

Body {

Background-image: URL ('/I/eg_bg_03.gif ');

Background-repeat: No-Repeat;

Background-position: 50% 50%;

}

Key:This causes the image to be placed properly, and its center is aligned with the center of its element. In other words, the percentage value is applied to both elements and images. That is to say, the image is described as 50% 50%The point (central point) and the element described as 50% 50%Point (center point) alignment (coincidence ).

For example, if the image is located at 0% 0%, the upper left corner of the image is placed in the upper left corner of the element padding area. If the image position is 100%, the lower right corner of the image will be placed in the lower right corner of the right corner. (That is, top, left, bottom, center... Can correspond to 0%, 100%, and 50%)

Therefore, if you want to place an image at 2/3 in the horizontal direction and 1/3 in the vertical direction, you can declare it as follows:

Body {

Background-image: URL ('/I/eg_bg_03.gif ');

Background-repeat: No-Repeat;

Background-position: 66% 33%;

}

If only one percentage value is provided, the provided value is used as a horizontal value, and the vertical value isDefault Value:50%. This is similar to the keyword.

The default value of background-position is 0% 0%, Which is functionally equivalent to top left. This explains why the background image is always tiled from the upper left corner of the element's padding, unless you have set different position values.

 

Example:

Background: # fff URL (image) No-repeat fixed 50%-30%;

In this case, where should the image be located? The algorithm formula is as follows:

The Coordinate Position of the Left vertex of the image from the left vertex of the container is

X: (container width-image width) x50 %

Y: (container height-Image Height) x (-30%)

The obtained result applies the coordinate rule. If the difference value is negative and the percentage is positive, the calculation result is negative. If the difference value is negative and the percentage value is negative, the calculation result is a positive number. All in all, this is the operator-based algorithm. Bring the result of the operation into the coordinate rule to get the position of the image.

For example:

The container is width: 600px; Height: 600px;

The image is width: 200px; Height: 200px;
We can use the above style to obtain the image position:

X :( 600px-200px) * 50%
Y :( 600px-200px) * (-30%)

 

Length value:

The Length Value refers to the offset in the upper left corner of the element's padding area. The offset is the upper left corner of the image.

For example, if the value is set to 50px 100px, the upper left corner of the image will be at the right of 50 pixels in the upper left corner of the element padding area and at the bottom of 100 pixels:

Body {

Background-image: URL ('/I/eg_bg_03.gif ');

Background-repeat: No-Repeat;

Background-position: 50px 100px;

}

Note that this is different from the percentage value, because the offset is only from the upper left corner to the other upper left corner. That is to say, the upper left corner of the image is aligned with the specified point in the background-position declaration.

For example, in a container whose width and height are PX, use:
Background-position: 150px 150px;

We can see that the vertices (coordinates 0, 0) in the upper left corner of the background image are located at the center point of the Qi container (coordinates 150px, 150px ).

Replace 150px with 50% and use background-position: 50% 50%;

AndNoThe following results:


InsteadIn this way:


As you can see, CSS calculates the center of the background image. This can also explain why we are using:

Background-position: 100% 100%;

When positioning, the image is placed in the lower-right corner of the container and does not run out of the container. (If background-position: 300px 300px; is used, the background image is removed from the container)
Similarly, if you use:

Background-position: 20% 20%;

The coordinates (20%, 20%) of the background image are located at the coordinates (20%, 20%) of the container ).

 

Also can refer to: http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html

Coordinate location of background images