Copyright © tutorialspoint.com

# Setting Backgrounds using CSS

This tutorial will teach you how to set backgrounds of various HTML elements. You can set following background properties of an element:

- The background-color property is used to set the background color of an element.

- The background-image property is used to set the background image of an element.

- The background-repeat property is used to control the repetition of an image in the background.

- The background-position property is used to control the position of an image in the background.

- The background-attachment property is used to control the scrolling of an image in the background.

- The background property is used as shorthand to specify a number of other background properties.

# Set the background color:

Following is the example which demonstrates how to set the background color for an element.

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

This will produce following result:

This text has a yellow background color.

To Become more comfortable - Do Online Practice

# Set the background image:

Following is the example which demonstrates how to set the background image for an element.

    <table style="background-image:url(/images/pattern1.gif);">
    <tr><td>
    This table has background image set.
    </td></tr>
    </table>

To Become more comfortable - Do Online Practice

# Repeat the background image:

Following is the example which demonstrates how to repeat the background image if image is small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once.

By default background-repeat property will have repeat value.

    <table style="background-image:url(/images/pattern1.gif);
                  background-repeat: repeat;">
    <tr><td>
    This table has background image which repeats multiple times.
    </td></tr>
    </table>

To Become more comfortable - Do Online Practice

Following is the example which demonstrates how to repeat the background image vertically.

    <table style="background-image:url(/images/pattern1.gif);
                  background-repeat: repeat-y;">
    <tr><td>
    This table has background image set which will repeat vertically.
    </td></tr>
    </table>

To Become more comfortable - Do Online Practice

Following is the example which demonstrates how to repeat the background image horizontally.

    <table style="background-image:url(/images/pattern1.gif);
                  background-repeat: repeat-x;">
    <tr><td>
    This table has background image set which will repeat horizontally.
    </td></tr>
    </table>

To Become more comfortable - Do Online Practice

# Set the background image position:

Following is the example which demonstrates how to set the background image position 100 pixels away from the left side.

    <table style="background-image:url(/images/pattern1.gif);
                  background-position:100px;">
    <tr><td>
    Background image positioned 100 pixels away from the left.
    </td></tr>
    </table>

Following is the example which demonstrates how to set the background image position 100 pixels away from the left side and 200 pixels down from the top.

    <table style="background-image:url(/images/pattern1.gif);
                  background-position:100px 200px;">
    <tr><td>
    This table has background image positioned 100
    pixels away from the left and 200 pixels from the top.
    </td></tr>
    </table>

To Become more comfortable - Do Online Practice

# Set the background attachment:

Background attachment determines whether a background image is fixed or scrolls with the rest of the page.

Following is the example which demonstrates how to set the fixed background image.

    <p style="background-image:url(/images/pattern1.gif);
                  background-attachment:fixed;">
    This parapgraph has fixed background image.
    </p>

Following is the example which demonstrates how to set the scrolling background image.

    <p style="background-image:url(/images/pattern1.gif);
                  background-attachment:scroll;">
    This parapgraph has scrolling background image.
    </p>

To Become more comfortable - Do Online Practice

# Shorthand property :

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

    <p style="background:url(/images/pattern1.gif) repeat fixed;">
    This parapgraph has fixed repeated background image.
    </p>

To Become more comfortable - Do Online Practice

Copyright © tutorialspoint.com