3 replies [Last post]
Genius
Genius's picture
Offline
Regular
China
Last seen: 7 years 30 weeks ago
China
Timezone: GMT+8
Joined: 2007-04-25
Posts: 20
Points: 0

background-position:100% -82px;

recently I look some CSS menu code and find this code ,but I don't know what's it meaning exactly,can you explain it for me ? thank you !

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

background-position takes a

background-position takes a horizontal and a vertical value, when two values are specified the horizontal value comes first. When a percentage is used the percentage is also applied to determine which bit of the background image to line up.

e.g. 100% is the same as right.

background-position: 100% -82px;

will locate the background image, on the right hand side of the container and start it 82px above the container - effectively chopping off the top 82px.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 12 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Ratz! Too slow

background-position:100% -82px;

The first is the horizontal position. Since it's percentage, it means that a point on the image 100% of the way from the left edge of the image will be placed 100% of the way from the left edge of the container. It is the equivalent of saying "right".

The -82px says the top edge of the image will be placed 82px above the top of the container. IOW, 82px off the top of the first iteration will be clipped. This might be done, for instance, to align the background tiling.

Good enough?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Genius
Genius's picture
Offline
Regular
China
Last seen: 7 years 30 weeks ago
China
Timezone: GMT+8
Joined: 2007-04-25
Posts: 20
Points: 0

I see ,thanks a lot

I see ,thanks a lot! *^_^*