How to Add Background Color in HTML?
FREE
Overview
We use the style property in HTML to change the background color. The style property defines an element's inline style. The CSS property background-color attribute is used with the HTML <body> element.
Note: Because HTML5 does not allow the bgcolor attribute on the body tag, the background color is added using CSS. In HTML5, the bgcolor property has been deprecated.
Keep in mind that using the style property overrides any global styles. Any style specified in the HTML <style> element or an external style sheet will be overridden.
Syntax to Add Background Color in HTML
By inserting
To the <body> element, you may change the color of an HTML document's background.
Examples to Add Background Color in HTML
Using bgcolor attribute
The following HTML code demonstrates the use of the bgcolor attribute:
Output:
Style attribute
To set the background color in HTML using the style attribute, try the following code. You can use any default colors or give a hex code of the color. The different methods of using colors are described below.
Output:
With the CSS background-color property
Using the CSS background-color property, we can set the background color in html on the element we define it for. The background of an element refers to the complete element, including its padding, but the margins are not included in the size.
Syntax:
As shown above, there are many ways to provide the color argument to the background-color property. There are some specific colors defined as keyword values, such as red, green, goldenrod, gray, etc., and a couple of special keywords specific to color, namely transparent and currentcolor. It also accepts the set of global values which have their usual meanings. Then the colors can also be defined by their RGB(A), hex, or HSL(A) values.
The following example shows setting background color in HTML using the background-color property on the following elements.
HTML Code:
CSS Code:
Output:
Transparent background-color is applied to the first div, meaning the background-color of the element behind it is 100% visible.
We have utilized RGB color values for the second div to specify a purple shade for the background-color property.
For the last div, we have used hex color values to create a gray blue background, and the background-color property is applied to the class `divthree`.
Specifying the fourth parameter in RGBA, HSLA or hex color values adjusts the transparency/opacity (also known as the alpha value) and can be used accordingly, to make background colors more transparent or opaque as illustrated in the following example:
Adding a Background color to Specific Elements
To add background color to specific elements we can:
- Use an inline style attribute and define the background color on the specified element,
Output:
- Use a CSS selector to select the specified element and set the background-color property in the CSS.
We use the id attribute to select the specific div element inside the CSS using the # selector to select the #bgcolor-div and set the background-color which is applied to it.
Output:
Setting Background Colors with Different color Types
You can set the HTML background colors using different color types. These color code types include the HTML color names, Hex color codes, RGB and RGBA values, HSL colors, and so on. Let us see some examples to understand different color types better.
Using HTML color names:
Output:
Using Hex color codes:
Output:
Using RGB values:
Output:
Using RGBA values:
Output:
Using HSL:
Output:
Giving different background colors to different elements
Different sections of the document can be given different background colors. Run the following code to get a better understanding.
Output:
Backgrounds with Gradients
You can use gradient backgrounds to make seamless shifts between two or more colors. Linear and radial gradient backdrops are the two forms of gradient backgrounds.
You can choose a color starting point for linear-gradient backgrounds. If you don't specify a starting point, "top to bottom" will be used by default.
Example of linear gradient:
Output:
The radial-gradient() function makes the backdrop image a radial gradient. The center of a radial gradient defines it. At least two color stops are required to generate a radial gradient.
Example of radial background:
Output:
Browser Compatibility
| Mobile | Web Browser |
|---|---|
| WebView Android 37 | Chrome 1 |
| Chrome Android 18 | Edge 12 |
| Firefox for Android 4 | Firefox 1 |
| Opera Android 14 | Internet Explorer 4 |
| Safari on iOS 1 | Opera 3.5 |
| Samsung Internet 1.0 | Safari 1 |
Learn more
Conclusion
- The style property defines an element's inline style.
- The CSS property background-color attribute is used with the HTML <body> element.
- HTML5 does not allow the bgcolor attribute on the body tag, so the background color is added using CSS.
- We learned the syntax of adding background color.
- We analyzed various methods of adding background color using examples, i.e., style attribute, with the CSS`` background-color property, adding a background color to specific elements, and setting background colors with different color types.
- We learned the browser compatibility for adding background color in HTML.
I hope this article conveys how to add background colors in HTML. Happy Learning!