CSS background-color Property

February 10, 2021 12:37 pm IST

You are Here:

CSS background-color Property

CSS background-color property sets the background color of an element.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-color: black; color: white; } </style> </head> <body> <h1>CSS background-color Property</h1> </body> </html>

Run

Syntax

Using CSS

element{ background-color: white; }

Using Javascript

object.style.backgroundColor="white";

Animatable

Yes, background-color property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS background-color property is white.

Property Value

The following table provides a list of values for CSS background-color property.

Value	Explanation
text	Specifies the name of the background-color in text. For example, black.
hex	Specifies the name of the background-color in Hexadecimal value. For example, #000000
rgb	Specifies the name of the background-color in rgb(red, green, blue) value. For example, rgb(0, 0, 0)
rgba	Specifies the name of the background-color in rgba(red, green, blue, opacity) value. For example, rgb(0, 0, 0, 0.5)
hsl	Specifies the name of the background-color in hsl(hue, saturation, lightness) value. For example, hsl(0, 0%, 0%)
hsla	Specifies the name of the background-color in hsla(hue, saturation, lightness, opacity) value. For example, hsl(0, 0%, 0%, 0.5)

Using Hexadecimal Value

In the following example, we will use hexadecimal value to set background color.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ /* using Hexadecimal value */ background-color: #000000; color: white; } </style> </head> <body> <h1>CSS background-color Property</h1> </body> </html>

Run

Using rgb Value

In the following example, we will use rgb value to set background color.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ /* using rgb value */ background-color: rgb(0,0,0); color: white; } </style> </head> <body> <h1>CSS background-color Property</h1> </body> </html>

Run

Using rgba Value

In the following example, we will use rgba value to set background color.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ /* using rgba value */ background-color: rgba(0,0,0,0.5); color: white; } </style> </head> <body> <h1>CSS background-color Property</h1> </body> </html>

Run

Using hsl Value

In the following example, we will use hsl value to set background color.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ /* using HSL value */ background-color: hsl(0,0%,0%); color: white; } </style> </head> <body> <h1>CSS background-color Property</h1> </body> </html>

Run

Using hsla Value

In the following example, we will use hsla value to set background color.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ /* using hsla value */ background-color: hsla(0,0%,0%,0.5); color: white; } </style> </head> <body> <h1>CSS background-color Property</h1> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS background-color property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1 id="point">CSS background-color Property</h1> <button onclick="myFunction()">Click Me</button> <script> function myFunction(){ var x = document.getElementById("point") x.style.backgroundColor = "black"; x.style.color = "white" } </script> <p><strong>Note</strong>: Click on the button to apply background-color</p> </body> </html>

Run