HTML Background

When you visit any website you can find different types of colors which directly interact with the user, these called the background color. Setting a background style for websites is done with the help of the background attribute typical of HTML elements.

It is the attribute of HTML code in which you can reach really attractive color effects for your web presence. You can use that attribute in two basic ways - through the Cascading Style Sheets (CSS) or by setting background properties in the HTML elements directly.

There are many ways to define background color in our web application, here we learn some import syntax and example which is given below: 

  • Define by hex color code

  • Define by using HTML color name

  • Define by using RGB color values

  • Define by using HSL color values

Define by Hex color code
This is the first and most popular way to define color code which is used by most of the developer at these times. You can apply a Hex color directly on the HTML <body> element using the style attribute.
you can find these color codes by color picker or any other. 


                                    <body style="background-color:#FF0000;"> </body>

Define by using HTML color name

This is the second most popular way to define the background-color attribute. Nowadays more than 140 color name is available which replace the Hex color codes.


                                     <body style="background-color:green;"> </body>

Define by using RGB color values
RGB is also another way to add color code in the HTML elements. Here we understand it by given syntax easily.


                                     <body style="background-color:rgb(255,0,0);"> </body>

Define by using HSL color values
It is less popular but supported all web browsers if you want to use this code then follows given syntax.


In this tutorial, we learn different types of background color attribute help to make the webpage more attractive for user interaction. 

                                   <body style="background-color:hsl(0,80%,60%);"> </body>