Developer/Designer Notes

CSS background-position and backgound-attachment

Posted by Kiran Mova on May 18, 2007

I wish the definition of values was more straightforward. But well, how does one define something that fits everyones perception. Here is what worked for me and hopefully I am going to remember this right. Of course, I got this from Eric Meyer on CSS.

background-position : the values are ‘fixed’  and ‘scroll’. ‘fixed’ is fixed relative to browser and not on the element on which the attribute is defined. When the image is ‘fixed’, it will be placed relative to top left corner of browser. The catch is that only the portion of the image that overlaps the element on which it is defined will be visible. Which explains why my sort images were disappearing from ‘th’, when I set the attribute to fixed. So don’t use fixed when the images are small and have to be near the element to which they belong.

background-position: The  valid keyword value combinations are : [top|center|bottom] [left | center| right]. Check this values at CSS Reference from W3C. Now what confused me was that the values are supposed to be xpos and ypos. But the keywords seem to specify y value before the x value. (Well, it works if specify the x-keyword before y-keyword.)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: