HTML Background Color enables the inclusion of the background color on the web page, which can be accomplished with the help of the background-color property used with HTML elements. It applies to the total size of the element specified, but the margin is not included. The property has the default value of transparent. The value of the background color property can be a named value specified in HTML, a HEX color value, an RGB color value, and HSL values.
Syntax
// For Internal & External Styling
background-color: red;
// Inline styling
<div style="background-color: blue">Content...</div>
Understanding the background-color
- The
background-color property defines the background color applied to the HTML element. - The background-color property is quite often used for specifying a color value to color the background of the element, which can be expressed in different formats. RGB, RGBA, HSL, or Color names. It can be applied through Inline styling, Internal styling, and External Stylesheet.
- The background color property with the value transparent is the default.
Usage of HTML Background Color
HTML Background Color property can be used in 3 Ways:
- Use inline styling to attribute the property and value of the wrapped inside style to a specific element.
- Internal styling is used where the property and value can be given inside style tags wrapped inside the head tag.
- External styling can also be used by linking the external file.
Changing the Background Color
For changing the background color of an HTML element, the background-color property is applied through CSS styling. The property can be applied with different color values like HEX, RGB, Named, and HSL and with various ways including inline, internal, and external styling.
HEX Color Value
The HEX color value contains six characters, with each pair (RR GG BB) represents the intensity of the Red, Green, and Blue color. The (#) symbol defines the beginning of a HEX color value. Each pair is a three-byte hexadecimal digits representing the intensity of the each color.
Example: The example illustrate the basic implementation of CSS background color with hex color as a value with Inline.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Background-color</title>
</head>
<body>
<div style="background-color: #949c30">
Background-color with hex color as value
</div>
</body>
</html>
Output:
Named Color Value
A Named Color Value defines to a predefined color name that represents a specific color and human redable. Instead of using HEX code like #FF0000 for red, the named color "red" can be used to achieve the same color.
Example: The example illustrate the basic implementation of CSS background color with named color as a value with inline.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Background-color</title>
</head>
<body>
<div style="background-color: pink;">
Background-color with named color
as value using Inline CSS
</div>
</body>
</html>
Output:
HSL Color Values
HSL is an abberbration for Hue, Saturation, and Lightness. The range of Hue can be define as 0 to 360. A saturation value of 100% is fully saturated color. A lightness value of 50% is a color with normal brightness.
Example: The example illustrate the basic implementation of CSS background color with HSL color as a value with Internal styling.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Background-color</title>
<style>
div {
background-color: hsl(40, 86%, 69%)
}
</style>
</head>
<body>
<div>
Background-color with hsl color
as value with Internal styling
</div>
</body>
</html>
Output:
RGB Color Values
RGB is an abbrebration of Red, Green, and Blue. The intensity of the red, green, and blue color can be ranging from 0 to 255.
Example: The example illustrate the basic implementation of CSS background color with RGB color as a value with External Stylesheet.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Background-color</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<div>
Background-color with
rgb color as value
</div>
</body>
</html>
/*style.css */
div {
background-color: rgb(81, 210, 145);
}
Output:
Browser Compatibility
- Chrome 122
- Edge 119
- Firefox 123
- Opera 104
Similar Reads
HTML Color Codes HTML Color Codes is a complete library of all Colors that can be used in HTML with their color name, HEXA Code, RGB Code, and HSL Code. With HTML Color Codes, you can easily integrate these colors directly into your HTML or CSS code, enhancing the visual appeal of your website. table{ display: inlin
11 min read
How to change Background Color in HTML ? The background color in HTML sets the visual backdrop behind your webpage content. Around 85% of beginner developers start by customizing background colors to enhance design and readability. Using CSS (Cascading Style Sheets), you can easily apply colors through the background-color property. This c
3 min read
Set Background Color using CSS Setting the background color in CSS involves using the background-color property to define the color displayed behind the content within an HTML element. This can be achieved through three primary methods: inline CSS, internal CSS, and external CSS. Each method offers different advantages depending
4 min read
HTML Hex Color Codes HEX color codes are a fundamental aspect of web design, allowing developers to specify colors in HTML and CSS with precision. These codes consist of a hash symbol (#) followed by six characters, each representing the intensity of the primary colors: red, green, and blue (RGB) in hexadecimal format.
5 min read
HTML DOM Style backgroundColor Property The backgroundColor property in HTML DOM is used to set or return the background-color of an element. Syntax: object.style.backgroundColorIt returns the background color of an element.object.style.backgroundColor ="color|transparent|initial|inherit"It is used to set the background color of an elemen
2 min read