The website today is not only showing a text. We all know, we can add or change some elements in HTML. We can add an image, video, audio, or change the color and style. Now in this tutorial, we will learn about How to set or changes HTML background-color with Hex color codes, HTML color names, and RGB values.
Definition and Usage.
The HTML background-color property is specified to change or sets the background color of an element. The background is the total size of an element, including padding and border, but not the margin.
Set the background-color Property in the HTML Element
The first starts with the background color of the <body> element. When you inserted it to the <body> element you will have full color of the page. Coloring the webpage body is pretty simple. Just follow this code to set HTML background color in the <body> element.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body style="background-color:aqua">
</body>
</html>This is how the HTML code above will be displayed in a browser:
Can we set the HTML background color in an element? Yes, we can. For example, we'll change the background color of <div> element.
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body style="background-color:aqua">
<div style="background-color:red">
<h2>Coloring the background of div Element</h2>
<p>This is a paragraph</p>
</div>
<div style="background-color:green">
<h2>Coloring the background of div Element</h2>
<p>This is a paragraph</p>
</div>
<div style="background-color:blue">
<h2>Coloring the background of div Element</h2>
<p>This is a paragraph</p>
</div>
</body>
</html>This is how the HTML code above will be displayed in a browser:
Set The Background Color Using Hex Color Code
Hex color code with the background-color property is the most popular way to set the HTML background color. Hex color has a hashtag '#' and an RRGGBB color code (#RRGGBB). This is an example of applying a Hex color code directly to the HTML element.
Example 3:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body style="background-color:#FFFFFF">
<div style="background-color:#FF0000">
<h2>Coloring the background of div Element Using Hex color</h2>
<p>Hex Color #FF0000</p>
</div>
<div style="background-color:#00FF00">
<h2>Coloring the background of div Element Using Hex color</h2>
<p>Hex Color #00FF00</p>
</div>
<div style="background-color:#0000FF">
<h2>Coloring the background of div Element Using Hex color</h2>
<p>Hex Color #0000FF</p>
</div>
</body>
</html>This is how the HTML code above will be displayed in a browser:
Set The Background Color Using HTML Color Name
A second way to set the background color in HTML is to use an HTML color name. The color name is the easiest way to change the color in the HTML document. Just type the color name like a Red, Green, or Blue with the background-color property.
Example 4:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body style="background-color:white">
<div style="background-color:Red">
<h2>Coloring the background of div Element Using Color Name</h2>
<p>Color Name Red</p>
</div>
<div style="background-color:Green">
<h2>Coloring the background of div Element Using Color Name</h2>
<p>Color Name Green</p>
</div>
<div style="background-color:Blue">
<h2>Coloring the background of div Element Using Color Name</h2>
<p>Color Name Blue</p>
</div>
<div style="background-color:cyan">
<h2>Coloring the background of div Element Using Color Name</h2>
<p>Color Name Cyan</p>
</div>
<div style="background-color:magenta">
<h2>Coloring the background of div Element Using Color Name</h2>
<p>Color Name Magenta</p>
</div>
<div style="background-color:yellow">
<h2>Coloring the background of div Element Using Color Name</h2>
<p>Color Name Yellow</p>
</div>
</body>
</html>This is how the HTML code above will be displayed in a browser:
Set The Background Color using RGB Color Values
Now, we'll set the HTML background-color property using the RGB values. Use the same style attribute as before, but, replace the Hex Color or Color Name with the RGB Values.
Example 5:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body style="background-color:rgb(255,255,255)">
<div style="background-color:rgb(255,0,0)">
<h2>Coloring the background of div Element Using RGB values</h2>
<p>RGB values rgb(255,0,0)</p>
</div>
<div style="background-color:rgb(0,255,0)">
<h2>Coloring the background of div Element Using RGB values</h2>
<p>RGB values rgb(0,255,0)</p>
</div>
<div style="background-color:rgb(0,0,255)">
<h2>Coloring the background of div Element Using RGB values</h2>
<p>RGB values rgb(0,0,255)</p>
</div>
</body>
</html>This is how the HTML code above will be displayed in a browser:
When using the RGB values, you have the additional option to set specifies the level of opacity with the alpha channel. That will control the transparency level of the background. The alpha is declared with the "a". If alpha is used, the format code is "rgba". The value of alpha is 0 and 1, 0 for full transparency and 1 for opaque. This is an example of using the "rgba" values.
Example 6:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body style="background-color:rgb(255,255,255)">
<div style="background-color:rgba(255,0,0,0.5)">
<h2>Coloring the background of div Element Using RGB with Alpha</h2>
<p>rgba(255,0,0,0.5)</p>
</div>
<div style="background-color:rgba(0,255,0,0.5)">
<h2>Coloring the background of div Element Using RGB with Alpha</h2>
<p>rgba(0,255,0,0.5)</p>
</div>
<div style="background-color:rgba(0,0,255,0.5)">
<h2>Coloring the background of div Element Using RGB with Alpha</h2>
<p>rgba(0,0,255,0.5)</p>
</div>
</body>
</html>This is how the HTML code above will be displayed in a browser:
Set The Background color using HSL color values
The HSL Color Values are less popular than the ways before. The HSL is Hue, Saturation, and Lightness. Just follow the same syntax as RGB values, to use them to set HTML Background color.
Example 7:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body style="background-color:hsl(0,100%,50%)">
</body>
</html>This is how the HTML code above will be displayed in a browser:
Same as RGB, you can also add the alpha channel to set the level of opacity to the HSL values.
Example 8:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body style="background-color:hsl(0,100%,100%))">
<div style="background-color:hsla(0,100%,50%,0.5)">
<h2>Coloring the background of div Element Using HSL with Alpha</h2>
<p>hsla(0,100%,50%,0.5)</p>
</div>
</body>
</html>This is how the HTML code above will be displayed in a browser:
That are several ways to set or change HTML background color. It's so easy and simple, remember this if you want to set the color, use the "style" attribute and CSS background-color property. The syntax is like this:
<tagname style="background-color:value">If you want to learn more about the color code, you can see in the previous tutorial about the HTML Color Codes. You can find the full source code of these examples on our GitHub.
That just the basic. If you need more deep learning about HTML, CSS, Javascript or related you can take the following cheap course:
- HTML & HTML5 For Beginners (A Practical Guide)
- Web - HTML
- Learn HTML, CSS, JAVASCRIPT
- JavaScript:
- Learn JavaScript Fundamentals
- Learning JavaScript Shell Scripting
Thank's!
