background-color

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

Try it

Syntax

/* Keyword values */ background-color: red; background-color: indigo; /* Hexadecimal value */ background-color: #bbff00; /* Fully opaque */ background-color: #bf0; /* Fully opaque shorthand */ background-color: #11ffee00; /* Fully transparent */ background-color: #1fe0; /* Fully transparent shorthand */ background-color: #11ffeeff; /* Fully opaque */ background-color: #1fef; /* Fully opaque shorthand */ /* RGB value */ background-color: rgb(255 255 128); /* Fully opaque */ background-color: rgb(117 190 218 / 0.5); /* 50% transparent */ /* HSL value */ background-color: hsl(50 33% 25%); /* Fully opaque */ background-color: hsl(50 33% 25% / 0.75); /* 75% opaque, i.e. 25% transparent */ /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: revert; background-color: revert-layer; background-color: unset; 

The background-color property is specified as a single value.

Values

The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image.

Accessibility concerns

It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

Formal definition

Formal syntax

Examples

HTML

div class="exampleone">Lorem ipsum dolor sit amet, consectetuerdiv> div class="exampletwo">Lorem ipsum dolor sit amet, consectetuerdiv> div class="examplethree">Lorem ipsum dolor sit amet, consectetuerdiv> 

CSS

.exampleone  background-color: transparent; > .exampletwo  background-color: rgb(153, 102, 153); color: rgb(255, 255, 204); > .examplethree  background-color: #777799; color: #ffffff; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 20, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Style backgroundColor Property

The backgroundColor property sets or returns the background color of an element.

See Also:

Syntax

Return the backgroundColor property:

Set the backgroundColor property:

Property Values

Value	Description
color	Specifies the background color. Look at CSS Color Values for a complete list of possible color values
transparent	Default. The background color is transparent (underlying content will shine through)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	transparent
Return Value:	A String, representing the background color
CSS Version	CSS1

Browser Support

backgroundColor is a CSS1 (1996) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

More Examples

Example

Set a background color of a specific element:

Example

Return the background color of a specific element:

Example

Return the background color of a document:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to Change the Background Color in JavaScript

HTML, CSS, and JavaScript are essential parts of building an interactive website. Most of the developers utilized inline CSS formatting to implement styles within HTML element tags. One of them, a style attribute, has its own importance in changing the background color of HTML elements. It is implemented on various elements such as headings, paragraphs, tables, or whole pages. This style attribute can also be utilized via JavaScript as well. This article demonstrates how to change the background color in JavaScript.

How to Change the Background Color in JavaScript?

The property “backgroundColor” is employed to return the color of the specified element. Users can access the HTML element and then apply this property to change the background color. The syntax is given here by assigning the background color in JavaScript.

In this syntax, “color” represents the value of the color to be assigned to the “backgroundColor” property of an HTML object.

Note: Users can specify “color” as the name of the color, RGB values, or hex color codes.

Example 1: Change the Background Color of Specified Area in JavaScript

An example is adapted to change the background color of a specified area. The following example code refers to changing the background color of the div having “id=txt”:

< h2 >An example to change background color

var uCol = document. getElementById ( «txt» ) ;

uCol. style . backgroundColor = ‘yellow’ ;

• A specific area is allocated by > tags and a message “Welcome to JavaScript” is written in it.
• A “Button” is attached with the “col()” method that is triggered by pressing it.
• In the “col()” method, document.getElementById extracts the value of the div element having “id=txt” and its value is stored in a variable named “uCol“.
• Finally, the “style.backgroundColor” property is employed to change the background color by assigning “yellow”.

The output shows that by pressing the button, the background color of the message is changed.

Example 2: Change the Background Color of the Whole Page in JavaScript

Another example is changing the complete background color of a webpage to blue by utilizing the hex code #0000FF. The following code refers to the above stated scenario:

document. body . style . backgroundColor = «#0000FF» ;

The code is demonstrated as:

• A button “Change background color” is employed, which is associated with a “myFun()” method.
• In “myFun()”, the style property “backgroundColor” is set to “ #0000FF” as a hex code.
• The “myFun()” method is triggered on the “onclick” by pressing the button.

The output shows that the background color is changed from white to blue by pressing the button in the browser window.

Conclusion

In JavaScript, the style.backgroundColor property is utilized for changing the background color. The color value can be in RGB, hex code, or its name. In this article, two examples are provided to change the background color by name and hex code of a specific area as well as the whole page. The backgroundColor property is useful for changing the background color of headings, tables, or any specified elements.

About the author

Syed Minhal Abbas

I hold a master’s degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.

Источник

Javascript Reference — HTML DOM Style backgroundColor Property

The backgroundColor property sets or gets the background color of an element.

Browser Support

backgroundColor	Yes	Yes	Yes	Yes	Yes

Syntax

Return the backgroundColor property:

object.style.backgroundColor

Set the backgroundColor property:

object.style.backgroundColor=color|transparent|initial|inherit

Property Values

Value	Description
color	Specifies the background color.
transparent	Default. The background color is transparent.
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	transparent
Return Value:	A string representing the background color
CSS Version	CSS1

Example

The following code shows how to set a background color

 !DOCTYPE html> html> body> h1>Hello World! button type="button" onclick="myFunction()">test script> function myFunction() !--from w ww . jav a2s .c o m--> document.body.style.backgroundColor = "blue"; >   

The code above is rendered as follows:

Example 2

The following code shows how to set a background color for a element.

 !DOCTYPE html> html> head> style> #myDIV !-- w w w. j a va 2 s .c om--> width: 300px; height: 300px; background-color: red; color: white; >  body> button onclick="myFunction()">test div >"myDIV">Hello script> function myFunction() < document.getElementById("myDIV").style.backgroundColor = "blue"; >   

The code above is rendered as follows:

Example 3

The following code shows how to get the background color from a element.

 !DOCTYPE html> html> body> div >"myDiv" style="background-color:orange;">This is a div element. button type="button" onclick="myFunction()">test script> function myFunction() !-- ww w .ja v a2s .c o m--> console.log(document.getElementById("myDiv").style.backgroundColor); >   

The code above is rendered as follows:

Example 4

The following code shows how to get the background color for body tag.

 !DOCTYPE html> html> body style="background-color:yellow;"> button type="button" onclick="myFunction()">test script> function myFunction() !-- w w w. j a va 2s . co m--> console.log(document.body.style.backgroundColor); >   

The code above is rendered as follows:

java2s.com | © Demo Source and Support. All rights reserved.

Источник

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Background Color

You can set the background color for HTML elements:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Ut wisi enim.

Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

Example

Hello World

Hello World

Hello World

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three elements have their background color set with RGB, HEX, and HSL values:

The following two elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):

Источник