Background-color property

Category: Web Development & Approved by devanshchakravarti83@gmail.com On January-19-2021 16:19:40

Background Color Property



The background-color property is used to set background color of on an HTML elements.
Note: You can also use alpha value in Hex Code. It can be written as: #RRGGBBAA, where “AA” represents alpha value.

The syntax for background-color property is:
background-color: <color>;
This property has a single value. You can use any format to fill a color like using Color Name Value, Hex Code Value, RGB Value, RGBA Value, HSL Value, and HSLA Value.

Example:
“Color Name”
background-color: IndianRed; “Color Name”
“Hex Code”
background-color: 0000FF;
background-color: 00F; “Shorthand”
background-color: 0000FF00; “Transparent”
background-color: 00F0; “Transparent Shorthand”
background-color: 0000FFFF; “Opaque”
background-color: 00FF; “Opaque Shorthand”
“RGB Value”
background-color: rgb(255, 69, 0); “Fully opaque”
background-color: rgba(255, 69, 0, 0.2); “ 20% transparent “

“HSL value“
background-color: hsl(0, 100%, 50%); “ Fully opaque “
background-color: hsla(0, 100%, 50%, 0.5); “ 50% transparent “

There are other values for background color : currentcolor and transparent.

Ensure that to meet current Web Content Accessibility Guidelines (WCAG), which is to maintain a color contrast ratio. The color contrast ratio is determined by comparing luminance of the text and the background color value.
For text content required ratio is 4.5:1, and for larger text (i.e. text larger than 18px and bold) ratio is 3:1

Code Example:
HTML Code
<body>
<p class=”text_1”>
Apply background Color
</p>
<p class=”text_2”>
Apply background Color
</p>
</body>

CSS Code
p {
font-size: 1.5em;
}
.text_1 {
background-color: 0000FF;
color: #FFF;
}
.text_2 {
background-color: rgb(255, 69, 0);
color: #FFF;
}

We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here


Comments

Share your thoughts about this post
web counter