The CSS background properties are utilized to incorporate background effects for elements.

You can use CSS background properties to add color or an image as the background of an HTML element.

CSS Background properties

• background-color
• background-image
• background-repeat
• Shorthand

Playground Example: To make things simpler, you can click the button below to open the playground, which comes with pre-filled HTML and CSS.

In the editor, you will see HTML, CSS, and JS input on the left/top, and the output on the right/bottom.

⁠⁠

CSS background-color

The `background-color` property is utilized to apply a background color to an element.

⁠⁠Below is the syntax for adding background color:

Selector {
  background-color: value;
}⁠

• The selector can be any one or more of those discussed previously in CSS Selectors.
• "background-color" is the property key
• "value" can be any color.

⁠⁠

Example:

/* background-color */
body {
  background-color: mediumaquamarine;
}

Try changing the value in the playground and observe the color change.

⁠⁠

CSS background-image

The `background-image` property is used to apply an image as the background of an element.

⁠⁠⁠Below is the syntax for adding background image:

Selector {
  background-image: url("value");
}⁠

• The selector can be any one or more of those discussed previously in CSS Selectors.

• "background-image" is the property key

• "value" a link that points to the resource.

Example:

/* background-image */
section {
  background-image: url("https://www.thehardcoder.dev/_next/image?url=https%3A%2F%2Fmedia.graphassets.com%2FFFjZLeMrRCmzUii1fL1p&w=640&q=75");
}

CSS background-repeat

The `background-image` property repeats an image both horizontally and vertically. You can see in the playground example that the first image is repeated.

To address repetition, we utilize the `background-repeat` property.

⁠⁠⁠Below is the syntax for adding background repeat:

Selector {
  background-repeat: value;
}⁠

• The selector can be any one or more of those discussed previously in CSS Selectors.

• "background-repeat" is the property key

• "value" can be no-repeat, repeat-x, etc.

Example:

/* background-repeat */
.nobgrepeat {
  background-repeat: no-repeat;
}

.bgrepeatx {
  background-repeat: repeat-x;
}

CSS background Shorthand

The shorthand property is used to specify all background properties in a single declaration.

⁠⁠⁠Below is the syntax for adding background shorthand:

Selector {
  background: all values;
}⁠

• The selector can be any one or more of those discussed previously in CSS Selectors.

• "background" is the property key

• "value" can be a mix of all possible values.

Example:

/* background-shorthand */
.bgshorthand {
  background: url("https://www.thehardcoder.dev/_next/image?url=https%3A%2F%2Fmedia.graphassets.com%2FFFjZLeMrRCmzUii1fL1p&w=640&q=75") no-repeat;
}

Note: Shorthands are very common in CSS, and we will encounter them more often as we move forward.

These are the basic CSS selectors. We will discuss the remaining ones in upcoming articles.

It will also be a good time to review the previous article, "How to Add CSS in HTML."

Want to practice more? Click here for more hands-on exercise.

⁠⁠References:

• https://developer.mozilla.org/en-US/docs/Web/CSS/background