Background properties let you style the backdrop of an element. You can use these properties to set a background color, add a background image, and control if and how the image repeats. These tools help you create visually appealing web pages with layered designs.

By using background properties, you can quickly change the look and feel of your page elements without affecting the content.

Syntax

Follow below syntax to add background properties in CSS code.

/* Set a background color */
background-color: color;

/* Set a background image */
background-image: url('path/to/image.jpg');

/* Control background image repetition */
background-repeat: repeat | no-repeat | repeat-x | repeat-y;

Explanation:

• Background Color: Changes the solid color behind the element's content.
• Background Image: Displays an image as the element's background.
• Background Repeat: Determines if the background image repeats horizontally, vertically, both, or not at all.

Example 1: Using Background Color and Image

In this example, we will style a section of the page by setting a background color and adding an image that does not repeat.

Explanation:

• Background Color: The section has a light blue background created by the hex code #f0f8ff.
• Background Image: A sample image is set as the background using a URL.
• Background Repeat: The image does not repeat, keeping the design neat.
• Outcome: The section shows how a background can combine a solid color with an image that is not repeated.

Example 2: Using Background Properties with Image Repeat

In this example, we will create a design where the background image repeats both horizontally and vertically over a colored background.

Explanation:

• Background Color: The container uses a light pink color (#ffe4e1) as its base.
• Background Image: A small image is applied as a pattern using a URL.
• Background Repeat: The image is repeated across the entire container, creating a tiled effect.
• Outcome: The design demonstrates how a repeating background image works over a solid color, providing texture and interest.

This lesson shows how to use background properties in CSS. You now know how to control the background color, apply an image, and manage its repetition to create balanced and visually appealing web elements.