Thursday, April 24, 2014

How To Position a CSS Background Image x-pixels From The Right?

Background - Shorthand property
The shorthand property for background is simply "background":
body {background:url("image.png") no-repeat right top;}
To position a CSS background image x-pixel from right, you can use this shorthand
body {background:url("image.png") no-repeat right 10px top;}
Note: The above solution doesn't work for IE8 and lower.
The most appropriate answer is to use following shorthand, until all browsers supports it.
 body {background:url("image.png") no-repeat 97% top;}
When using the shorthand property the order of the property values is:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this order.