Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
background-color

background-color

Specifies the background color of an element.

Sample Code

style.css

/* Transparent (default) */
div.test { background-color: transparent;}

/* Hex color code */
div.test1 { background-color: #ff0;}

/* Color name */
div.test2 { background-color: red;}

/* rgb() function */
div.test3 { background-color: rgb(0, 119, 204);}

/* rgba() for semi-transparency (last value is opacity: 0–1) */
div.test4 { background-color: rgba(0, 0, 0, 0.5);}

/* Practical example using CSS custom properties */
:root { --main-bg: #f0f4ff;}
.card { background-color: var(--main-bg);}

/* Change background color on hover */
button { background-color: #0077cc;}
button:hover { background-color: #005599;}

Available Values

Value	Description
transparent	Sets the background to transparent. This is the default value.
Color code or color name	Sets the background color to the specified color.

Browser Preview

<p style="background-color: #ff0; ">The background color is set to '#ff0'.</p>

Browser Compatibility

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5+ ○

2 and below ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and below ×

Chrome Android

Latest ○

Same support as desktop.

Firefox Android

Latest ○

Same support as desktop.

※ Version data is based on MDN.

Notes

You can specify the background color using transparent, a web color code, or a color name.

For a full list of supported color names, see the Mozilla MDN documentation.
※ background-color is also covered in detail in this tutorial article.

If you find any errors or copyright issues, please contact us.

Home