Set the Background Properties
By Stephen Bucaro
Use the background property as a shorthand method to set multiple background
properties in one declaration. The properties must be in the order: color, image,
position, repeat but you can leave some properties out and the browser will use a
default value for those properties.
Below is an example of using inline style to set the border properties for a div.
<div style="background: #b0ffb0 url(bkgndimg.gif) top right no-repeat">Text</div>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
These style rules result in a green background color with a purple image in the
upper-right corner that does not repeat, but scrolls with the background.
background Syntax
background: color image position size repeat origin clip attachment
Property | Description |
color | background color |
image | background image |
position | position of background image |
size | size of the background image |
repeat | no-repeat|repeat|repeat-x|repeat-y |
origin | position area of the background image |
clip | painting area of the background image |
attachment | whether the background image is fixed or scrolls |
• One more attribute you can specify at end of the background
property is inherit (requires no value). If the parent element sets the
background property and the child element sets the background property,
leaving out a value, the child element will use the value set in the parent.
More CSS Quick Reference: • Class Selector • Use an Embedded Style Sheet • Use an External Style Sheet • Set the Text Alignment • Set an Element's Float • Highlight Text • Set an Element's Padding • Set the Word Spacing • Set the box-sizing Property • nth-child Selector
|