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 using with HTML element. It applies to the total size of the element specified but the margin is not included. The property has the default value transparent. The value of the background color property can be as named value specified in HTML, the HEX color values, RGB color values, and HSL values.
Table of Content
Syntax
// For Internal & External Styling
background-color: red;
// Inline styling
<div style="background-color: blue">Content...</div>
Understanding the background-color
-
The
background-colorproperty 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 value transparent is default.
Usage of HTML Background Color
HTML Background Color property can be used in 3 ways
- Use Inline styling to give the property and value wrapped inside style attribute 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.
<!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.
<!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.
<!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.
<!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