CSS BACKGROUND-POSITION-X

If a ‘background-image’ is specified, this property specifies the initial position on the X-axis of the background image specified in the browser window if it is not continuously tiled in the element’s rendering box. A minimum value for this property indicates the left side of the rendering box, and a maximum value is at the right side. The Y-axis component of the background position can be specified using the ‘background’, ‘background-position’ or ‘background-position-y’ properties.

Example

div.marked { background-image: url(watermark.jpg); background-position-x: center }

Possible Values

[Percentage]: Percentage is in reference to the dimensions of the box of the current element. Value specifies the percentage on BOTH the image and the canvas and may be negative (eg: 20% indicates the reference point 20% from the left side of the image is to be located at 20% from the left side of the element’s rendering box

[Length]: Represents an absolute X-coordinate position for the image and may be negative. Standard Absolute or Relative Length Units may be used here

left|center|right: Keywords representing X-axis screen positions for image placement

9 Responses

Marton Sari

3.28.2010

It’s not in the css 3 working draft, they dont plan to include it, so…

Venkatesh

5.4.2010

how i can put the position 20px from right using css to manage my background image. layout type is flexible and div in which i want to give position is also on 100%.

Please suggest it help me lot…

thanks in advance!!!!!!

Denny Wardhana

3.15.2012

[how i can put the position 20px from right using css to manage my background image. layout type is flexible and div in which i want to give position is also on 100%.]

Add 20px transparent space on the right of your image.
Then set the background-position : right top
Or so ..

RheGa

4.3.2012

can u give me example for right posiion with 20px from the right ?

Lechlak

4.5.2012

right: 20px; – not exactly sure what you are asking for.

کیش

4.17.2012

yler says:
September 30, 2010 at 10:04 pm

Hey Ricky,

I found this tutorial while searching how to have a fixed sidebar vertically but not horizontally, like the sidePanel you have on this site.

I’ve run into one problem that I can’t seem to figure out though. Everything works perfectly, the x-axis is position:absolute and the y-axis is fixed, but when I make the window small enough to scroll horizontally, and scroll so that the sidebar is out of the screen, and then maximize the window, the sidebar is still out of the screen (now with no horizontal scroll).

This website here doesn’t do that, everything pops right back into place when I maximize here, so I was wondering if you could tell me how to fix that.

Denny Wardhana

4.21.2012

C’mon …
If you have a 100×100 pixels image.
Then make it 120×100 pixels where the additional 20px is a transparent part on the right of your image.

Then set the background as right top.

See this:
http://jpg.cdndb.com/attachments/css-background-position-x.jpg

Denny Wardhana

4.21.2012

Try this:

#hbar{ background:transparent url(http://jpg.cdndb.com/attachments/css-background-position-x.jpg) scroll no-repeat right top; }