CSS Background

The CSS background-color property sets the background color of an element. The value can be a named color (such as "red"), a hex code, or an RGB value.

To use background-color, you need to apply it to a specific element on your HTML page by setting the property on the corresponding CSS class or id.

Examples

For example, to set the background color of a <div> element with the id example to red, you would use the following CSS:

#example {
  background-color: red;
}

To set the background color of all <p> elements to blue, you would use:

p {
  background-color: blue;
}

You can also use RGB values or HEX color codes to set background color.

#example {
  background-color: #FFFFFF; /* white */
}
#example {
  background-color: rgb(255, 0, 0); /* red */
}

You can also set the background color for specific state of an element like :hover, :active, :focus, etc.

#example:hover {
  background-color: green;
}

Opacity

The CSS opacity property sets the transparency level of an element. The value can be a number between 0 (completely transparent) and 1 (completely opaque).

To use opacity on the background-color of an element, you can include the opacity property within the same CSS rule as the background-color property.

For example, to set the background color of a <div> element with the id example to red with 50% opacity, you would use the following CSS:

#example {
  background-color: red;
  opacity: 0.5;
}

You can also use rgba value to set the background color with opacity, where the last parameter of rgba define the level of opacity.

#example {
  background-color: rgba(255, 0, 0,0.5); /* red with 50% opacity */
}

Please note that using opacity property will also make all of the child elements of that element, transparent as well.

If you want to make only the background transparent, you can use background-color:rgba() instead of opacity.

CSS Background Properties

There are several CSS properties that can be used to style the background of an element, including:

  • background-color: sets the background color of an element.
  • background-image: sets an image as the background of an element.
  • background-repeat: determines whether and how an background image should repeat.
  • background-position: sets the position of a background image.
  • background-size: sets the size of a background image.
  • background-attachment: sets whether a background image scrolls with the rest of the page or is fixed.
  • background: a shorthand property that allows you to set all of the above properties in one line.
  • background-clip: sets the painting area of the background.
  • background-origin: sets the positioning area of the background-image.
  • background-blend-mode: sets how a background image and the element's background color should blend together.

Example:

#example {
  background-color: red; /* Background color */
  background-image: url("image.jpg"); /* Background image */
  background-repeat: no-repeat; /* Image should not repeat */
  background-position: center; /* Image should be center aligned */
  background-size: cover; /* Image should cover the entire element */
  background-attachment: fixed; /* Image should be fixed */
}

CSS Basics