The background-color property in CSS is used to set the background color of an element. This property is essential for creating visually appealing web pages and can be applied to various elements such as divs, paragraphs, sections, and the entire page. The background-color property allows you to fill the background of an element with a solid color, making it stand out or blend with other elements on the page.

Basic Usage

The basic syntax of the background-color property is straightforward:

selector { background-color: value; }

Example

<!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } p { background-color: yellow; } </style> </head> <body> <p>This paragraph has a yellow background.</p> </body> </html>

In this example:

  • The entire page has a light blue background.
  • The paragraph has a yellow background.

Color Values

Like the color property, background-color supports various color value formats:

1. Named Colors

CSS supports a set of predefined color names.

header { background-color: coral; }

2. Hexadecimal (HEX) Colors

Hexadecimal colors are defined with a # followed by either three or six hexadecimal digits.

section { background-color: #ff5733; /* A shade of orange */ }

3. RGB Colors

RGB colors are specified using the rgb() function, where values range from 0 to 255 for red, green, and blue.

div { background-color: rgb(173, 216, 230); /* Light blue */ }

4. RGBA Colors

RGBA colors add an alpha channel to RGB for specifying transparency. The alpha value ranges from 0 (completely transparent) to 1 (completely opaque).

article { background-color: rgba(255, 99, 71, 0.5); /* Semi-transparent red */ }

5. HSL Colors

HSL stands for Hue, Saturation, and Lightness.

footer { background-color: hsl(120, 100%, 50%); /* Pure green */ }

6. HSLA Colors

HSLA extends HSL by adding an alpha channel for transparency.

aside { background-color: hsla(240, 100%, 50%, 0.3); /* Semi-transparent blue */ }

7. Transparent

The transparent keyword can be used to make the background color completely transparent, which is the default for most elements.

.navbar { background-color: transparent; }

Inheritance and Default Behavior

  • Inheritance: The background-color property does not inherit from parent elements by default. Each element's background color must be set individually unless it's naturally transparent.
  • Default Value: The default value of background-color is transparent.

Practical Examples

1. Setting a Background Color for the Entire Page

body { background-color: #f0f0f0; /* Light gray */ }

2. Adding Background Color to Buttons

button { background-color: #4CAF50; /* Green */ color: white; }

3. Hover Effects

Changing the background color on hover is a common technique to enhance user interaction.

a { background-color: #008CBA; /* Blue */ color: white; text-decoration: none; padding: 10px 20px; display: inline-block; } a:hover { background-color: #005f75; /* Darker blue */ }

4. Transparent Background with Text Overlay

You can create a transparent background to highlight text over an image or another background.

.overlay { background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ color: white; padding: 20px; }

5. Gradient Backgrounds

While background-color sets a solid color, you can combine it with background-image for gradients.

.gradient { background-image: linear-gradient(to right, red, orange); }