CSS Background Code

Apart from the various CSS font properties, there are other properties that can assist in styling your text. For example, you can change the color of text, align text, add decoration properties and more.

In CSS, text can be styled using the properties listed below. Using this list, you can learn how to use each css text property and what it looks like in a browser.

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

CSS Background Color




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

This results in:

This text has a background color applied.

CSS Background Image


<p style="height:100px;background-image:url(http://2.bp.blogspot.com/_jsh8ETlAeWg/SMLZw2n-LHI/AAAAAAAAAFY/dH2eeWZn8A0/S75/mylogo.gif);">This text has a background image applied. </p>



This results in:

This text has a background image applied.

CSS Background Repeat

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


<p style="height:100px;background-image:url(http://2.bp.blogspot.com/_jsh8ETlAeWg/SMLZw2n-LHI/AAAAAAAAAFY/dH2eeWZn8A0/S75/mylogo.gif);background-repeat:no-repeat;">This background image does not repeat. </p>


This results in:

This background image does not repeat.

CSS Background Position

Determines the position of the background image.


<p style="height:100px;background-image:url(http://2.bp.blogspot.com/_jsh8ETlAeWg/SMLZw2n-LHI/AAAAAAAAAFY/dH2eeWZn8A0/S75/mylogo.gif);background-repeat:no-repeat;background-position:100px;">This background image is positioned 100 pixels in from the left. </p>


This results in:

This background image is positioned 100 pixels in from the left.

CSS Background Attachment

Determines whether or not the background image scrolls with the outer container.


<p style="height:100px;width:150px;overflow:scroll;background-image:url(http://2.bp.blogspot.com/_jsh8ETlAeWg/SMLZw2n-LHI/AAAAAAAAAFY/dH2eeWZn8A0/S75/mylogo.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 results in:

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.

Shorthand Code

You can use the background property to set all the background properties at once. For example:


<p style="height:100px;width:150px;overflow:scroll;background:url(http://2.bp.blogspot.com/_jsh8ETlAeWg/SMLZw2n-LHI/AAAAAAAAAFY/dH2eeWZn8A0/S75/mylogo.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 results in:

This paragraph tag has been styled using the 'background' property, which is shorthand for setting multiple properties for an HTML element.