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:
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:
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:
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:
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:
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:
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:
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:
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:
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.