Skip to main content

CSS Backgrounds

CSS backgrounds are a way to add visual style and interest to the background of an HTML element.

With CSS, you can set a background color, image, or gradient on an element, as well as adjust the positioning and size of the background.

Here are some of the properties you can use to style backgrounds with CSS:

background-color​

background-color: Sets the background color of an element.

As an example:

Editor

Loading...

In this example:

  • We're using CSS to style a <div> element with a class of "color-example".
  • We've set the background color to a light gray using the background-color property.
  • We've also added some padding and centered the text within the element using the padding and text-align properties.

background-image​

background-image: Sets the background image of an element.

As an example:

Editor

Loading...

In this example:

  • We're using CSS to style a <div> element with a class of "image-example".
  • We've set the background image to an image URL using the background-image property.
  • We've also set the background image to cover the entire element using the background-size property, and added some padding and centered the text within the element using the padding and text-align properties.

background-repeat​

background-repeat: Determines how a background image should repeat.

As an example:

Editor

Loading...

In this example:

  • We're using CSS to style a <div> element with a class of "repeat-example".
  • We've set the background image to an image URL using the background-image property.
  • We've also set the background image to repeat horizontally using the background-repeat property with the value of repeat-x.
  • We've added some padding and centered the text within the element using the padding and text-align properties.

background-position​

background-position: Sets the starting position of a background image.

As an example:

Editor

Loading...

In this example:

  • We're using CSS to style a <div> element with a class of "position-example".
  • We've set the background image to an image URL using the background-image property.
  • We've also set the background image to not repeat using the background-repeat property, and positioned it at the center of the element using the background-position property with the value of center center.
  • We've set the background image to cover the entire element using the background-size property, and added some padding and centered the text within the element using the padding and text-align properties.

background-size​

background-size: Sets the size of a background image.

As an example:

Editor

Loading...

In this example:

  • We're using CSS to style a <div> element with a class of "size-example".
  • We've set the background image to an image URL using the background-image property.
  • We've also set the background image to not repeat using the background-repeat property, positioned it at the center of the element using the background-position property with the value of center center, and set the size of the background image to contain within the element using the background-size property.
  • We've added some padding and centered the text within the element using the padding and text-align properties.

background-attachment​

background-attachment: Determines if a background image should scroll with the content or stay fixed in place.

As an example:

Editor

Loading...

In this example:

  • We're using CSS to style a <div> element with a class of "attachment-example".
  • We've set the background image to an image URL using the background-image property.
  • We've also set the background image to not repeat using the background-repeat property, positioned it at the center of the element using the background-position property with the value of center center, and set the size of the background image to cover the entire element using the background-size property.
  • We've set the background-attachment property to fixed, which means the background image stays fixed in place while the content of the element scrolls behind it.
  • We've also added some padding and centered the text within the element using the padding and text-align properties.

background-clip​

background-clip: Determines the area of the element that the background image should cover.

As an example:

Editor

Loading...

In this example:

  • We're using CSS to style a <div> element with a class of "clip-example".
  • We've set the background image to an image URL using the background-image property.
  • We've also set the background image to not repeat using the background-repeat property, positioned it at the center of the element using the background-position property with the value of center center, and set the size of the background image to cover the entire element using the background-size property.
  • We've set the background-clip property to padding-box, which means the background image is clipped to the padding box of the element, which includes the padding area but not the border or margin.
  • We've also added some padding and centered the text within the element using the padding and text-align properties.

background-origin​

background-origin: Determines the starting point of the background image.

As an example:

Editor

Loading...

In this example:

  • We're using CSS to style a <div> element with a class of "origin-example".
  • We've set the background image to an image URL using the background-image property.
  • We've also set the background image to not repeat using the background-repeat property and set the size of the background image to cover the entire element using the background-size property.
  • We've set the background-origin property to border-box, which means the background image is positioned relative to the border box of the element, which includes the padding and border areas but not the margin.
  • We've also added some padding and centered the text within the element using the padding and text-align properties.

background-blend-mode​

background-blend-mode: Specifies how the background image should blend with the content.

As an example:

Editor

Loading...

In this example:

  • We're using CSS to style a <div> element with a class of "blend-example".
  • We've set two background images using the background-image property, separated by a comma.
  • We've also set the size of the background images to cover the entire element using the background-size property.
  • We've set the background-blend-mode property to overlay, which blends the two background images together using the overlay blending mode.
  • We've also set the height of the element and centered the text within the element using the height and text-align properties.