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
| Value | Description |
|---|---|
| [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 |
8 Responses
It’s not in the css 3 working draft, they dont plan to include it, so…
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!!!!!!
[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 ..
can u give me example for right posiion with 20px from the right ?
right: 20px; – not exactly sure what you are asking for.
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.
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
Try this:
#hbar{ background:transparent url(http://jpg.cdndb.com/attachments/css-background-position-x.jpg) scroll no-repeat right top; }