Document.bgColor is a deprecated instance property that gets or sets the document’s background color as a string. Learn how legacy pages used it, how it relates to sibling properties like fgColor and alinkColor, the MDN-recommended CSS replacement, and five examples with try-it labs.
Instance property
string color
Deprecated
Page background
CSS background
fg / link colors
Before CSS became universal, developers sometimes colored entire pages with JavaScript or obsolete <body bgcolor="..."> attributes. The Document object exposed matching properties such as bgColor (background), fgColor (foreground text), and link colors.
MDN’s recommended alternative today is standard CSS background-color, reachable in the DOM through document.body.style.backgroundColor.
Study bgColor to recognize legacy intranet pages and old tutorials. For new sites, put background colors in stylesheets or design tokens—not on deprecated Document properties.
Related Document tutorials: alinkColor, applets, Document constructor.
Document.bgColorA getter/setter instance property on Document. Reading it returns the background color string; writing it changes the document background where the property is still honored.
darkblue, white) or hex (#ff0000).null — assigning null converts to "" (empty string).#ffffff) in Mozilla Firefox.background-color instead.document.bgColorconsole.log(document.bgColor);
// e.g. "#ffffff" in Firefox (browser-dependent)document.bgColor = "darkblue";
document.bgColor = "#f0f4f8";
document.bgColor = null; // becomes ""| Goal | Code / note |
|---|---|
| Read background | document.bgColor |
| Set name (MDN) | document.bgColor = "darkblue" |
| Set hex | document.bgColor = "#f0f4f8" |
| Clear (legacy) | document.bgColor = null → "" |
| Modern replacement | document.body.style.backgroundColor |
| MDN status | Deprecated |
Four facts about document.bgColor.
stringColor value
backgroundDocument page
deprecatedLegacy API
background-colorModern fix
bgColor vs body.style.backgroundColordocument.bgColor | body.style.backgroundColor | |
|---|---|---|
| Recommended? | No | Yes (when JS is needed) |
| MDN status | Deprecated | Standard DOM CSSOM |
| Stylesheet friendly | No | Prefer CSS rules instead |
| Best for | Reading old code | Runtime theme toggles |
Examples follow MDN Document: bgColor. Open try-it labs to see background changes where the property still applies.
Set and read the deprecated document background color.
document.bgColor = "darkblue"The classic MDN one-liner for a dark blue page background.
document.bgColor = "darkblue";
console.log(document.bgColor);Named colors are valid legacy inputs. Browsers may normalize the string when you read it back.
document.bgColorLog the current background color (browser-dependent).
console.log(document.bgColor);
// Firefox default (MDN): "#ffffff"
// Other browsers may differ or ignore the property in practiceIf CSS already sets body { background-color }, that may override what you read from the legacy property.
Other assignment forms and the recommended replacement.
Use a hexadecimal color for precise brand backgrounds.
document.bgColor = "#f0f4f8";
console.log(document.bgColor);Hex values work the same as color names on this legacy property.
null Becomes Empty StringMDN: assigning null is equivalent to assigning "".
document.bgColor = null;
console.log(document.bgColor === "");
console.log(JSON.stringify(document.bgColor));This null coercion is a Document property quirk shared with other legacy color properties.
MDN’s recommended approach—style backgrounds in CSS or via body.style.
body {
background-color: #0f172a;
color: #f8fafc;
}// When JavaScript must set it at runtime:
document.body.style.backgroundColor = "#0f172a";CSS supports themes, media queries, and design systems without deprecated Document hooks.
background-color.document.bgColor.document.bgColor = "darkblue" on page load.
Document-level color applied behind body content.
Modern stylesheets often take precedence over legacy hooks.
background-colorDefine page backgrounds in stylesheets or body.style for runtime changes.
bgColor is deprecated in the HTML specification (MDN).null becomes "" per MDN.#ffffff (white) per MDN.fgColor, linkColor, vlinkColor, alinkColor.background-color via document.body.style.backgroundColor.Document.bgColor is deprecated but may still work for compatibility in some browsers. MDN recommends CSS background-color instead. Logos use the shared browser-image-sprite.png sprite from this project.
Legacy document background color getter/setter — use CSS background-color in new code.
Bottom line: Recognize document.bgColor in old scripts. For new page backgrounds, use CSS background-color on body or a layout wrapper — never document.bgColor.
Document.bgColor is a deprecated getter/setter for the page background color. It is useful for understanding legacy HTML-era scripts—not for building new features. Use CSS background-color instead.
Continue with body, ownerDocument, alinkColor, Document constructor, or the JavaScript hub.
background-color on body or layout wrappersdocument.body.style.backgroundColor for runtime theme togglesdocument.bgColor when you touch legacy filesdocument.bgColor in new projectsnull coercion patterns in new codefgColor / link colors when migrating old pagesdocument.bgColorDeprecated background color — prefer CSS background-color.
string color
APIdeprecated
Legacybackground
Pagebecomes ""
MDNbackground-color
CSSThe legacy Document color family—bgColor, fgColor, linkColor, vlinkColor, and alinkColor—mirrored attributes you could once put directly on the <body> tag. CSS made those global JavaScript hooks unnecessary for new websites.
Learn the standard Document.body reference to your page content.
6 people found this page helpful