CSS Background Code

The following CSS background codes demonstrate the various CSS properties you can use to style the background of any HTML element.

CSS Background Color

To set the background color of an element, use the background-color property.

Code	Result
<p style="background-color:yellow;">This text has a background color applied.</p>	This text has a background color applied.

To add a background image to an element, use the background-image property.

Code	Result
<p style="height:100px;background-image:url(/pix/smile.gif);">This text has a background image applied.</p>	This text has a background image applied.

Determines whether the background image repeats (tiles) or not. For info on the possible values, see background-repeat.

Code	Result
<p style="height:100px;background-image:url(/pix/smile.gif);background-repeat:no-repeat;">This background image does not repeat.</p>	This background image does not repeat.

Determines the position of the background image. For more information, see background-position.

Code	Result
<p style="height:100px;background-image:url(/pix/smile.gif);background-repeat:no-repeat;background-position:100px">This background image is positioned 100 pixels in from the left.</p>	This background image is positioned 100 pixels in from the left.

Determines whether or not the background image scrolls with the outer container. For more information, see background-attachment.

Code	Result
<p style="height:100px;width:150px;overflow:scroll;background-image:url(/pix/smile.gif);background-attachment:fixed;">This background image is fixed - it doesn't scroll with its outer container. This example uses the CSS overflow property to force the box to scroll when there's too much text to fit in the box.</p>	This background image is fixed - it doesn't scroll with its outer container. This example uses the CSS overflow property to force the box to scroll when there's too much text to fit in the box.

You can use the background property to set all the background properties at once. For more information, see background.

Code	Result
<p style="height:100px;width:150px;overflow:scroll;background:url(/pix/smile.gif) repeat fixed;">This paragraph tag has been styled using the 'background' property, which is shorthand for setting multiple properties for an HTML element. </p>	This paragraph tag has been styled using the 'background' property, which is shorthand for setting multiple properties for an HTML element.