CSS background-color Property

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>

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.

ValueExplanation
textSpecifies the name of the background-color in text. For example, black.
hexSpecifies the name of the background-color in Hexadecimal value. For example, #000000
rgbSpecifies the name of the background-color in rgb(red, green, blue) value. For example, rgb(0, 0, 0)
rgbaSpecifies the name of the background-color in rgba(red, green, blue, opacity) value. For example, rgb(0, 0, 0, 0.5)
hslSpecifies the name of the background-color in hsl(hue, saturation, lightness) value. For example, hsl(0, 0%, 0%)
hslaSpecifies 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>

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>

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>

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>

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>

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>

Reminder

Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author