Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to use the background-position attribute in CSS", so the editor summarizes the following, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use the background-position attribute in CSS" article.

Description of background-position attribute in CSS:

Sets or retrieves the background image location of the object. You must first specify the background-image property. This property positioning is not affected by the patch property (padding) setting of the object. The default value is 0% 0%. At this point, the background picture will be positioned in the upper-left corner of the content area of the object that does not include a padding.

If only one value is specified, the value is used for Abscissa. The ordinate will default to 50%. If two values are specified, the second value is used for the ordinate. If the value is set to rightcenter, the background image will be positioned to the right because the value of right as the Abscissa value will override the Centervalue.

The corresponding script feature is background Position.

◆ syntax:

Background-position:length | | length

Background-position:position | | position

Value of ◆:

Length: percentage | length value consisting of floating-point numbers and unit identifiers.

Position:top | center | bottom | left | center | right

Background-position-- defines the location of the background picture

[| | left | center | right] [| | top | center | bottom]]

* level

Left: left

Center: medium

Right: right

* Vertical

Top: up

Center: medium

Bottom: lower

* combination of vertical and horizontal

XMui% yMui%

X-posy-pos

Initial value: 0% 0%

Inheritance: no

For: all elements

Background: background. Position: position.

I. background-position:lefttop

The upper-left corner of the background image is aligned with the upper-left corner of the container (container), and the excess is hidden.

Equivalent to background-position:0,0

It is also equivalent to background-position:0%,0%.

II. Background-position:rightbottom

The lower right corner of the background image is aligned with the lower right corner of the container (container), and the excess is hidden.

Equivalent to background-positon:100%,100%

Also equivalent to background-positon: width of the container (container)-width of the background picture, height of the container (container)-height of the background picture

III. Background-position:500px15px

The background image moves the 500px to the right and the 15px down from the upper left corner of the container (container), hiding the excess.

IV. Background-position:-500px-15px

The background image moves the 500px to the left from the upper left corner of the container (container), moves the 15px up, and hides the excess.

V. Background-position:50%50%

Equivalent to left: {width of the container (container)-width of the background image} * left percentage, the excess is hidden.

Equivalent to right: {height of the container (container)-height of the background image} * right percentage, the excess is hidden.

For example:

Background-position:50%50%

It sure is

Background-position: (1000-2000) * 50%px, (500-30) * 50%px

That is back

Ground-position:-500px,235px

That is, the background image moves 500px from the upper left corner of the container (container) to the left and 235px down.

VI. Background-position:-50%-50%

Equivalent to the width of the left:- {{container (container)-the width of the background image} * left percentage (with positive percentages)}, the excess is hidden.

Equivalent to the height of the right:- {{container (container)-the height of the background image} * right percentage (with positive percentages)}, the excess is hidden.

For example:

Background-position:-50%-50%

It sure is

Background-position:- {(1000-500) * 50} px,- {(500-360) * 50} px

That is,

Background-position:-250px,-70px

That is, the background image moves 250px from the upper left corner of the container (container) to the left, and moves 70px up.

The above is about the content of this article on "how to use background-position attributes in CSS". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.