CSS Backgrounds

❮ PreviousNext ❯

The CSS background properties are used to add background effects for elements.

In these chapters, you will learn about the following CSS background properties:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background (shorthand property)

CSS background-color

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

Example

The background color of a page is set like this:

body {
  background-color: lightblue;
}

Try it Yourself »

With CSS, a color is most often specified by:

  • a valid color name – like “red”
  • a HEX value – like “#ff0000”
  • an RGB value – like “rgb(255,0,0)”

Look at CSS Color Values for a complete list of possible color values.

Other Elements

You can set the background color for any HTML elements:

Example

Here, the <h1>, <p>, and <div> elements will have different background colors: 

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

Try it Yourself »

ADVERTISEMENT

Opacity / Transparency

The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 – 1.0. The lower value, the more transparent:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Example

div {
  background-color: green;
  opacity: 0.3;
}

Try it Yourself »

Note: When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read.

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

100% opacity

60% opacity

30% opacity

10% opacity

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) – which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

Example

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

Try it Yourself »

The CSS Background Color Property

PropertyDescription
background-colorSets the background color of an element

❮ PreviousNext ❯

CSS Background Image

❮ PreviousNext ❯

CSS background-image

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

By default, the image is repeated so it covers the entire element.

Example

Set the background image for a page: 

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

Try it Yourself »

Example

This example shows a bad combination of text and background image. The text is hardly readable: 

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

Try it Yourself »

Note: When using a background image, use an image that does not disturb the text.

The background image can also be set for specific elements, like the <p> element:

Example

p {
  background-image: url(“paper.gif”);
}

Try it Yourself »

The CSS Background Image Property

PropertyDescription
background-imageSets the background image for an element

CSS Background Image Repeat

❮ PreviousNext ❯

CSS background-repeat

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example

body {
  background-image: url(“gradient_bg.png”);
}

Try it Yourself »

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:

Example

body {
  background-image: url(“gradient_bg.png”);
  background-repeat: repeat-x;
}

Try it Yourself »

Tip: To repeat an image vertically, set background-repeat: repeat-y;

CSS background-repeat: no-repeat

Showing the background image only once is also specified by the background-repeat property:

Example

Show the background image only once:

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

Try it Yourself »

In the example above, the background image is placed in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.

CSS background-position

The background-position property is used to specify the position of the background image.

Example

Position the background image in the top-right corner: 

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

Try it Yourself »

The CSS Background Repeat and Position Properties

PropertyDescription
background-positionSets the starting position of a background image
background-repeatSets how a background image will be repeated

❮ PreviousNext ❯

CSS Background Attachment

❮ PreviousNext ❯

CSS background-attachment

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):

Example

Specify that the background image should be fixed:

body {
  background-image: url(“img_tree.png”);
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Try it Yourself »

Example

Specify that the background image should scroll with the rest of the page:

body {
  background-image: url(“img_tree.png”);
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

Try it Yourself »

The CSS Background Attachment Property

PropertyDescription
background-attachmentSets whether a background image is fixed or scrolls with the rest of the page

❮ PreviousNext ❯

CSS Background Shorthand

❮ PreviousNext ❯

CSS background – Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

Instead of writing:

body {
  background-color: #ffffff;
  background-image: url(“img_tree.png”);
  background-repeat: no-repeat;
  background-position: right top;
}

You can use the shorthand property background:

Example

Use the shorthand property to set the background properties in one declaration:

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

Try it Yourself »

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

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

It does not matter if one of the property values is missing, as long as the other ones are in this order. Note that we do not use the background-attachment property in the examples above, as it does not have a value.

ADVERTISEMENT

Test Yourself With Exercises

Exercise:

Set the background color of the <h1> element to “lightblue”.

<style>
h1 {
  : lightblue;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Submit Answer »

Start the Exercise

All CSS Background Properties

PropertyDescription
backgroundSets all the background properties in one declaration
background-attachmentSets whether a background image is fixed or scrolls with the rest of the page
background-clipSpecifies the painting area of the background
background-colorSets the background color of an element
background-imageSets the background image for an element
background-originSpecifies where the background image(s) is/are positioned
background-positionSets the starting position of a background image
background-repeatSets how a background image will be repeated
background-sizeSpecifies the size of the background image(s)

❮ PreviousNext ❯