CSS Background Properties

The CSS background properties are used to define the background effects for HTML elements.

CSS properties used to define background effects:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background Color

The background-color property defines the background color of an element.

To set the background color of the page, use the body selector:

body {background-color:#b0c4de;}

In CSS, colors are often defined in the following ways:

  • Hexadecimal - e.g., #FF0000 for red, #00FF00 for green, #0000FF for blue; this is the most common way.
  • RGB - e.g., rgb(255,0,0), or in percentage form: rgb(100%, 0%, 0%), rgb(0%, 100%, 0%), rgb(0%, 0%, 100%)
  • Color names - e.g., blue, red, green

In the following example, the h1, p, and div elements have different background colors:

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Background Image

The background-image property specifies an image to use as the background of an element.

By default, the background image is repeated so it covers the entire element. If the size of the box is larger than the size of the background image, the image starts from the top-left corner.

Example of setting a background image for the page:

body {background-image:url('paper.gif');}

The following is an example of a bad combination of text and background image. The text is hard to read:

body {background-image:url('bgdesert.jpg');}

Background Image - Tiling

By default, the background-image property repeats the image in both horizontal and vertical directions.

Some images do not look good when tiled horizontally or vertically:

body {
    background-image:url('gradient2.png');
}

If the image is only tiled horizontally (repeat-x), the page background will look better:

body {
    background-image:url('gradient2.png');
    background-repeat:repeat-x;
}

Background Image - Positioning and No Repeat

To prevent the background image from affecting the text layout, use the background-repeat property:

body {
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
}

In the above example, the background image and text appear in the same position. To make the page layout more reasonable and not affect the readability of the text, we can change the image position.

Use the background-position property to change the position of the image in the background:

body {
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
    background-position:right top;
}

Background Shorthand Property

In the above examples, we used many properties to control the background. To simplify these properties, we can combine them into a single property.

The shorthand property for background is "background":

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Background Transparency

You can set a semi-transparent background using the rgba color value. In the following CSS style, we set a black background with 20% transparency:

background: rgba(0, 0, 0, 0.2);

The transparency alpha value ranges from 0 to 1. You can omit the leading 0 when using 0.x:

background: rgba(0, 0, 0, .2);

When using the shorthand property, the order of the values is:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Not all properties need to be used; you can use them according to the needs of your page.

This example uses the previously introduced CSS. You can check the corresponding examples: CSS Examples.

CSS Background Properties

Property Description
background Shorthand property to set all the background properties in one declaration.
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page.
background-color Sets the background color of an element.
background-image Sets an image as the background.
background-position Sets the starting position of a background image.
background-repeat Sets if/how a background image will be repeated.

More Examples

How to Set a Fixed Background Image

This example demonstrates how to set a fixed background image. The image does not scroll with the rest of the page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebCode101(webcode101.com)</title>
<style>
body {
    background-image:url('./smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}
</style>
</head>

<body>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
    <p>The background image is fixed. Try to scroll down the page.</p>
</body>
</html>