When using the shorthand property the order of the property values, and defaults are:
- background-color:
- background-image:
- background-repeat:
- background-attachment: scroll|fixed|local|initial|inherit;
- background-position: horiz vert either in px or %, else center or one of: left top,left center, left bottom, right top, right center, right bottom, center top, center center or center bottom. If you only specify one keyword, the other value will be "center".
Additional CSS3 properties are:
- background-size:
- background-origin
- background-style
- background-clip
Thus:
Background: #f84c9f url(http://images.vrx.palo-alto.ca.us/vrx/strips/nvrx4.png) no-repeat fixed 50% 80%;
Is equivalent to:
Background-color: #efffff;
Background-image: url(http://images.vrx.palo-alto.ca.us/vrx/strips/nvrx4.png);
Background-repeat: no-repeat
Background-attachment: fixed;
Background-position: 50% 80%;
Example:
Background: #efffff url(http://images.vrx.palo-alto.ca.us/vrx/strips/nvrx4.png) no-repeat fixed 50% 80%;
Ref: https://developer.mozilla.org/en/docs/Web/CSS/background
Special Cases
Background-size: CONTAIN; and
Background-size: COVER are explained badly. What they really do is clip photo to frame with or without loss of picture or additional space:
