CSS Background Color

CSS Background Color allows you to set the background color of HTML elements. By using the background-color property, you can apply a solid color to the background area of an element.

Basic Background Color

To set a basic background color for an HTML element, use the background-color property.

Example
Try yourself 
        
            body {
    background-color: lightblue;
}

h1 {
    background-color: #ff0000;
}

In the above example, the body element will have a light blue background, the h1 heading will have a red background,

Transparent Background Color

You can create a transparent background by specifying an alpha value using rgba or hsla notation.

Example
Try yourself 
        
            body {
    background-color: rgba(0, 128, 0, 0.5); /* Semi-transparent green */
}

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

In this example, the element body will have a semi-transparent green background.

Background Color Animation

You can animate the background color using CSS animations or transitions.

Example
Try yourself 
        
            body {
    background-color: #ff0000;
    animation: colorChange 3s infinite alternate;
}

@keyframes colorChange {
    0% { background-color: #ff0000; }
    50% { background-color: #00ff00; }
    100% { background-color: #ff0000; }
}

In this example, the element with the class body will have an animated background color that transitions between red and green every 3 seconds.