How to set a background color
background-color fills an element's box, including its padding and the area under its border, with a color. It accepts any CSS color.
The page color is set on body, the card and notice on their divs, and the highlight on an inline element. Inline elements get a background only behind their text, line by line.
Background color of the whole page
Put background-color on body. If the <html> element has no background of its own, the browser paints the body's background over the whole window, even where the body's content ends:
body {
background-color: #111827;
color: #f9fafb; /* change the text color too, for contrast */
}
The old HTML way was <body bgcolor="black">. The bgcolor attribute is obsolete on every element, so use CSS instead. Browsers still honor it for old pages, which is why it may seem to work.
Transparent backgrounds
Every element starts with background-color: transparent, so you see the parent behind it. To tint a box and still see through it, use a color with an alpha channel:
opacity: 0.5 would also let the stripes show through, but it fades the text as well. For a see-through background with solid text, use an alpha color. The colors page lists every way to write one.
Where the color is painted
By default the background reaches the outer edge of the border (so it shows through a dashed or semi-transparent border). background-clip changes that:
In the first box the amber shows between the dashes. In the second it stops at the inner edge of the border, and in the third only the content area is colored. Margin is never painted: it is always transparent.
Striped table rows
A background on every other row makes wide tables easier to scan:
background-color vs the background shorthand
background sets every background property at once. Any part you leave out goes back to its default, which catches people out:
.hero {
background-image: linear-gradient(#2563eb, #1e40af);
background: #111827; /* also resets background-image to none */
}
.hero {
background-image: linear-gradient(#2563eb, #1e40af);
background-color: #111827; /* only the color; the gradient stays */
}
Use background-color when you only mean the color. Use background when you are setting the whole background in one place, often a color plus an image; see background-image.
Accessibility: pair it with the text color
A background color is only readable next to its text color. Whenever you set one, check the other: WCAG asks for a contrast ratio of at least 4.5:1 for body text. Dark backgrounds need light text set explicitly, because text keeps the dark color it inherits.
Common mistakes
- Using
bgcolor. It is obsolete. Usebackground-color. - Using
opacityfor a see-through background. It fades the content too. Use an alpha color. - A
backgroundshorthand after abackground-image. It resets the image. Writebackground-colorinstead. - Expecting margin to show the color. Margin is outside the background. Use padding for colored space.
- A dark background with default text. Set a light
coloras well.
Frequently Asked Questions
How do I change the background color in HTML?
Use the CSS background-color property. For the whole page: body { background-color: #f3f4f6; }. For one element: <div style="background-color: #fef3c7;">.
Is bgcolor still valid in HTML?
No. The bgcolor attribute on <body>, <table> and <td> is obsolete in HTML5. Browsers still draw it for old pages, but the correct way is background-color in CSS.
How do I make a background color transparent?
Use a color with an alpha channel, such as background-color: rgb(37 99 235 / 20%);. Unlike opacity, this keeps the text inside fully visible.
What is the difference between background and background-color?
background-color sets only the color. background is a shorthand for every background property (color, image, position, size, repeat, attachment, origin and clip), so background: red; also resets any background image to none.
Why does my body background color fill the whole window?
When the <html> element has no background of its own, the browser paints the body's background across the entire canvas, even beyond the body's box. Give html a background if you need the two to differ.
