Horje
HTML Background Color

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-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 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.

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:

bg0

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:

bg11

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:

bg22

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>

CSS

/*style.css */
div {
    background-color: rgb(81, 210, 145);
}

Output:

bg19

Browser Compatibility

  • Chrome 122
  • Edge 119
  • Firefox 123
  • Opera 104

 


Reffered: https://www.geeksforgeeks.org

HTML

Related
SVG Full Form SVG Full Form
HTML Input Type HTML Input Type
HTML Audio HTML Audio
HTML Online Compiler HTML Online Compiler
HTML Tutorial HTML Tutorial

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 11



 

Horje