How to set background color in HTML

This article will show you how to change the background color of a web page by editing its HTML code.

Steps

Method 1 of 4: Preparing to edit HTML code

Step 1. Determine the background color you want to use

In HTML, colors are defined by codes that define different shades. Use the free online W3Schools HTML Color Picker to find the color codes you want:

• Go to https://www.w3schools.com/colors/colors_picker.asp in your computer's web browser.
• Select the base color you want to use in the "Pick a Color" section.
• Select a shade on the right side of the page.
• Make a note of the code that appears to the right of the selected shade.

Step 2. Open the HTML file in a text editor

Remember that HTML5 no longer supports the attribute. Therefore, the background color and other page style parameters are set using CSS.

You can open an HTML document in Notepad ++ or Notepad (Windows), or TextEdit or BBEdit (Mac)

Step 3. Add the heading "html" to the document

All page style parameters, including the background color, must be placed between the tags:

Step 4. Create a blank line between the "style" tags.

On this line, which should be below the tag and above the tag, you will enter the required information. 5.

Step 6. Add a "body" element

Enter the following code between the tags:

body {}

• Anything enclosed within a "body" element in CSS will affect the entire page.
• Skip this step if you want to create a gradient background.

Method 2 of 4: How to create a solid background

Step 1. Find the heading "html"

It should be at the top of the document.

Step 2. Add a "background-color" property to the "body" element

Enter

background-color:

in curly braces inside the "body" element. You should get the following code:

body {background-color:}

Note that you must use the word "color" in this code, not "color"

Step 3. Add the desired background color to the "background-color" property

To the right of "background-color:" enter the numeric code for the selected color, and then enter a semicolon (;). For example, to make the background of the page pink, write the following code:

body {background-color: # d24dff; }

Step 4. Review the information inside the "style" tags

At this point, the head of your HTML document should look like this:

Step 5. Use "background-color" to set the background color of other elements (headings, paragraphs, and the like)

For example, to set the background color of the main header (

or paragraph (

), write the following code:

     

Heading on a green background
Paragraph on white background







 

Method 3 of 4: How to create a gradient background

Step 1. Find the heading "html"

It should be at the top of the document.

Step 2. Remember the basic syntax for this process

To create a gradient, you need to know two quantities: the starting point / angle and the range of colors that will blend into one another. You can choose several colors so that they blend into each other; you can also set the direction or angle of the transition.

background: linear-gradient (direction / angle, color1, color2, color3 and so on);

Step 3. Create a vertical gradient

If no direction is specified, the gradient will go from top to bottom. To create a gradient like this, enter the following code between the tags:

html {min-height: 100%; } body {background: -webkit-linear-gradient (# 93B874, # C9DCB9); background: -o-linear-gradient (# 93B874, # C9DCB9); background: -moz-linear-gradient (# 93B874, # C9DCB9); background: linear-gradient (# 93B874, # C9DCB9); background-color: # 93B874; }

Different browsers implement gradient functions differently, so you need to add multiple versions of your code

Step 4. Create a directional gradient

If you don't want the gradient to run vertically, specify the direction of the color transition. To do this, enter the following code between the tags:

html {min-height: 100%; } body {background: -webkit-linear-gradient (left, # 93B874, # C9DCB9); background: -o-linear-gradient (right, # 93B874, # C9DCB9); background: -moz-linear-gradient (right, # 93B874, # C9DCB9); background: linear-gradient (to right, # 93B874, # C9DCB9); background-color: # 93B874; }

If you want, swap the words "left" and "right" to experiment with different directions of the gradient

Step 5. Use other properties to adjust the gradient

You can do more with it than you think.

• For example, you can enter a percentage after each color. This will specify how much space each color segment will occupy. Here's a sample code with these parameters:

  background: linear-gradient (# 93B874 10%, # C9DCB9 70%, # 000000 90%);
  
  

• Add transparency to the color. In this case, it will gradually fade out. To achieve a fading effect, use the same color. To set the color, you need the rgba () function. The last value will define transparency: 0 is an opaque color and 1 is a transparent color.

  background: linear-gradient (to right, rgba (147, 184, 116, 0), rgba (147, 184, 116, 1));
  
  
  
  
  
  
  
  
  

Step 6. Review the code

The code for creating a color gradient as the background of a web page would look something like this:

Method 4 of 4: How to create a changing background

Step 1. Find the heading "html"

It should be at the top of the document.

Step 2. Add the "animation" property to the "body" element

Enter the following code after "body {" and before the closing curly brace:

-webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite;

The top line of text is for Chromium-based browsers, and the bottom line of text is for other browsers

Step 3. Add colors to the "animation" property

Use the @keyframes rule to specify the background colors that will cycle and the time each color will appear on the page. Be sure to enter a different code for different browsers. Enter the following code below the closing curly brace of the "body" element:

@ -webkit-keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}}

• Note that the two rules (@ -webkit-keyframes and @keyframes) have the same background colors and percentages. This is to ensure that the changing background works correctly in any browser.
• Percentages (0%, 25%, and so on) represent a fraction of the time (60 seconds). When the page loads, the background color will be # 33FFF3. When 15 seconds have passed (25% of 60 seconds), the background will change to color # 7821F, and so on.
• Change the time and colors to match the desired result.

Step 4. Review the code

The code to create the changing background should look like this:

Advice

• If you want to use primary colors in your HTML code, you can enter color names (without the # symbol) rather than their numeric codes. For example, to create an orange background, enter
  background-color: orange;
  .
• You can set an image as the background of a web page.