How to Change Background Color in HTML?

Problem:

Is there any pure HTML way to change background color?

Solution:

In the latest HTML version, there is no pure HTML method to change background color of an element. But, previously, you can use the HTML “bgcolor” attribute in the opening tag of an element to set its background color. Check the following example. It could change the background color of the entire webpage to yellow.

<body bgcolor=”#FFFF00”>

Alert: The attribute bgcolor has been deprecated in latest HTML5 version. So, don’t use this method.

Problem:

So, you want to know what is the latest recommend method to change background color?

Solution:

As changing background color is part of styling the webpage, its best to use CSS to accomplish it. The CSS “background-color” property is used to set background color of an element. The example below will make entire background color to yellow-

<body style=”background-color:#FFFF00;”>

Note: You can define any CSS properties in three different ways- a. Inline, b. Internal, and c. External. In the above examples, we used inline styling method.

Changing background color of different elements:

In the above examples, you’ve changed background color of the entire website applying the background-color property to body element. You can also change background color of different HTML elements. See the example below-

Changing background color of Headings: – You can change background color of any headings (h1 to h6). See the example-

<h2 style=”background-color:#FFFF00;”>

Changing background color of part of a webpage: – You can change background color of parts of a webpage. See the example-

<div style=”background-color:#FFFF00;”>

Changing background color of a table: – You can change background color of a table. See the example-

<table style=”background-color:#FFFF00;”>

Changing background color of a paragraph: – You can change background color of a paragraph. See the example-

<p style=”background-color:#FFFF00;”>

Different ways of defining color:

There are few different ways you can define color in HTML-

Using Hex Color Code: In this method, you need six characters to define a color. The following example uses hex color code to set yellow as background color of the webpage.

<body style=”background-color:#FFFF00;”>

Using Color Name: You can use one of the 140 color names to define a color. The following example uses color name to set yellow as background color of the webpage.

<body style=”background-color:YELLOW;”>

Using RGB Color Model: The following example uses RGB color model to set yellow as background color of the webpage.

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

Using HSL Color Model: The following example uses HSL color model to set yellow as background color of the webpage.

<body style=”background-color:hsl(60%,100%,50%);”>

Different types of background:

Beside solid color background, you can also set-

Transparent color background
Gradient background
Changing background

1. Transparent color background: You can change opacity of any color using RGBA and HSLA color model. In both color model, the last character “A” stands for alpha channel which controls opacity of a color. Its ranges from 0.0(fully transparent) to 1.0 (not transparent at all).

The following is an example of transparent yellow in RGBA color model-

<body style=”background-color:rgba(255, 255,0,.5);”>

The following is an example of transparent yellow in HSLA color model-

<body style=”background-color:hsla(60,100%,50%,.5);”>

2. Gradient background: As because gradient background is treated as image in CSS, we’ll use CSS “background-image” property instead of “background-color” property to create gradient color background. There are two types of gradient – 2.a. Linear Gradient, and 2.b. Radial Gradient.

2.a. Linear Gradient: It is understandable that creating a gradient, you need direction and at least two colors.

In the linear gradient, you can create eight directional gradients – top to bottom, bottom to top, left to right, right to left, left-bottom to right-top, right-bottom to left-top, left-top to right-bottom.

To create linear gradient, you’ll use linear-gradient() function. The function takes minimum 3 parameters. First parameter denotes the direction of the gradient. For example, to create a left to right gradient, you’ll mention “to right” as the first parameter. Similarly, to create a gradient from top-left to bottom-right, you’ll mention “to right bottom”. The next two parameters are starting and ending colors. In the example below, the gradient starts from left to right and starts from yellow color and ends to red color-

<body style="background-image: linear-gradient(to right, #FFFF00, #FF0000);">

Another example-

<body style="background-image: linear-gradient(to right bottom, #FFFF00, #FF0000);">

Note: Though, we mentioned that the function takes 3 parameters, but, you can omit the first parameter and its default value would be “to bottom”.

Note: To get the more control over the direction, you can use degree instead of the keyword like “right”, “right bottom”. Here, top is considered 0 degree, right is 90 degree and so on. The following example is equivalent to “to right bottom”-

<body style="background-image: linear-gradient(225deg, #FFFF00, #FF0000);">

2.b. Radial Gradient: In radial gradient, the starting point is the center of the element and goes outside the element. Unlike linear gradient where you used linear-gradient() function, you’ll use radial-gradient() function in redial gradient. The function takes few parameters. In simple form, the first parameter denotes starting point and the next ending point. Here is an example-

<body style="background-image: radial-gradient(#FFFF00, #FF0000);">

Note: In the gradient example above, you used two color stops. But, actually, you can use as many color stops as you need. See the example-

<body style="background-image: linear-gradient(225deg, #FFFF00, #FF0000, #0000FF, #00FFFF);">

3. Changing background: You can create a changing background which will change itself from one style to another after a certain time. At first, you’ll specify your desired keyframes for the animation inside the @keyframe rule. Then, you’ll bid the animation to your desire HTML element. See the example-

<style>
      body {
        animation: animName 4s infinite;
      }
      
      @keyframes animName {
        0% {
          background: #FFFF00;
        }
        25% {
          background: #00FFFF;
        }
        50% {
          background: #FF0000;
        }
        75% {
          background: #0000ff;
        }
      }
</style>