To get an attractive layout with charming visual effects for your website, selecting different background colors is surely a great option. In this quick tutorial, we will teach you How to Change background color in HTML using the latest defined protocol.
No wonder HTML offers this feature to change background color with your favorite one.
In the older versions of HTML, <bgcolor> attribute was used for this purpose.
However, this attribute is no longer supported with the body tag in the latest HTML5 version.
Style element with the BODY tag is used in CSS to add background color for this purpose.
Background-color is actually a property of CSS which is helpful in changing background color in HTML.
When we use the Style attribute, it will override any other style which was previously with the
Ways to set Background Color in HTML:
To change background color in HTML, specific color codes can be used in the syntax.
Moreover, users can simply use color names directly in the syntax for accomplishing the same.
There are also some other different ways of changing Background color in HTML. We will mention each method in this blog as we proceed further with it.
Table of Contents
Have a quick look on the different methods:
Method 1: Using Hex Color Codes
Coloring a web page background is pretty much simple as long as you use Hex codes.
Different colors are having different Hex codes that users can insert in the HTML <body> element using the style attribute to see the desired background color.
Just follow the syntax mentioned below:
<body style=“background-color: #000000;”> </body>
This color code which is present in the above syntax is for Black color. You may use Google to get the complete table for Hex codes of different colors.
Method 2: Using Color names
Replacing the Hex code with a color name will also do the same job for you. This method is one of the easiest methods to select background color in HTML.
You can run the code to implement this method practically:
<body style=“background-color;red”> </body>
How to change Background color in HTML using Color names is undoubtedly the easiest possible way for selecting your favorite background color in HTML.
However, the main drawback of this way of changing background color in HTML is that there are a very limited number of color name options that can be acquired inside the syntax.
That’s why, users can use RGB and HEX color code which we will further mention in this blog.
Method 3: Using RGB Color Values
Using RGB values to add background color in HTML is another very excellent option available out there for the users.
This method is an impressive choice if you want to select the extent of opacity in the background color.
Just replace the hex value or color name with prefix rgba() and insert the rgb values of different colors with the help of a predefined table. To display red background color, use this syntax:
<body style=“background-color:rgb(255,0,0);”> </body>
RGB values of different colors are available on the internet. Just go on Google and search it out to change the color of the background in HTML.
Method 4: Background color in HTML using HSL Color Values
HSL which stands for Huw, Saturation and Lightness is another terrific way of changing background color in HTML.
This magnificent method is pretty much simple to follow. Just replace the rgb() with hsl() prefix to select your favorite color. Rest of the syntax will remain the same.
HSL values for different html text background color can be found on the internet.
HSL values also consist of an alpha channel that decides the opacity of the color. In this case, hsla() prefix is used where the fourth value will depict the opacity order.
The value of opacity will revolve around 0 to 1 only.
How do you put a background color on text in HTML?
Changing or putting a background color on text in HTML is pretty much easy. For this purpose, just follow the syntax of all the above-mentioned ways with a minor change of altering the attribute or element.
Just look at the RGB value syntax mentioned below to put a background color on text in HTML:
<body> <p style=“color=rgb(255,0,0);”Red color paragraph text</p> </body>
Color property with Style element is used in adding color to background text.
Most of the users who wonder how to change the background of text in HTML can opt the above-mentioned ways to carry out their requirements.
How do you put a background on HTML?
Learning about how to change background color in HTML is not a big deal if you learn about different CSS properties with their respective syntax.
The Background-image property of CSS styles is used to add an image in the background with HTML. This property of CSS uses the BODY tag in HTML.
Moreover, an additional background-repeat property is available in CSS styles that help to repeat that image on the web page.
The position of the image can be fixed by using background-position property.
Body { background-image: url(/path/to/image.png); }
You may also set the position of the image on the web page according to your requirement.
In order to change the color of the whole background from default White color, just follow this syntax:
Body { background-color: #efefef; }
Placing a suitable color code above will change the color of the background of the webpage to some other color of your choice.
Conclusion
This tutorial was all about the description of the topic: how to change background color in HTML. With various CSS properties, anyone can create awesome styling for their web pages to make it more stupendous. Your website will definitely become more popular and famous if you choose better styling with attractive background colors.
Please feel free to share your thoughts and suggestions below in the comments section.