3 Methods to Set a Background Color with HTML & CSS

An easy-to-follow guide for coding with CSS and HTML to add the background colors of a page

Did you want to change the background color of that page using HTML? Unfortunately, with HTML 5, this is no longer possible in just HTML coding. Instead, you'll need to use both HTML and CSS coding, which works even better. This wikiHow teaches you how to change the background color of a web page by editing its HTML and CSS.

Things You Should Know

  • Although the attribute for HTML to manage background color is gone, you can still use HTML with CSS to change your background color easily.
  • You'll need a numeric code for the color you want if you want a specific color. If you don't need a specific color, you can use words like "orange" or "light blue."
  • When editing a web page with HTML and CSS, you can create a solid background, gradient, or changing background.
Method 1
Method 1 of 3:

Setting a Solid Background Color

  1. Image titled 2609629 1 3
    1
    Find your document's "html" header. It should be near the top of the document.
  2. Image titled 2609629 2 3
    2
    Add the "background-color" property to the "body" element. Type background-color: between the body brackets. You should now have the following "body" element: 
      body {
    background-color: 
}
    • In this context, only one spelling of "color" will work; you can't use "colour" here.
    Advertisement
  3. Image titled 2609629 3 3
    3
    Add your desired background color to the "background-color" property. Type your selected color's numeric code followed by a semicolon next to the "background-color:" element to do so. For example, to set your page's background to pink, you would have the following: 
      body {
    background-color: #d24dff;
}
  4. Image titled 2609629 4 3
    4
    Review your "style" information. At this point, your HTML document's header should resemble the following: 
      <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #d24dff
}
</style>
</head>
</html>
  5. Image titled 2609629 5 3
    5
    Use "background-color" to apply background colors to other elements. Just as you set it in the body element, you can use "background-color" to define the backgrounds of other elements such as headers, paragraphs, and so on. For example, to apply a background color to a main header (<h1>) or a paragraph (<p>), you would have something resembling the following code:[1] 
      <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #93B874;
}
h1 {
    background-color: #00b33c;
}
p {
    background-color: #FFFFFF);
}
</style>
</head>
<body>
<h1>Header with Green Background</h1>
<p>Paragraph with white background</p>
</body>
</html>
    6. Advertisement
Method 2
Method 2 of 3:

Creating a Gradient Background

  1. Image titled 2609629 6 3
    1
    Find your document's "html" header. It should be near the top of the document.
  2. Image titled 2609629 7 3
    2
    Understand the basic syntax of this process. When making a gradient, there are two pieces of information you'll need: the starting point/angle, and the colors that the gradient will transition between. You can select multiple colors to have the gradient move between all of them, and you can set a direction or angle for the gradient.[2] 
    background: linear-gradient(direction/angle, color1, color2, color3, etc);
    }}
  3. Image titled 2609629 8 4
    3
    Make a vertical gradient. If you don't specify the direction, the gradient will go from top to bottom. To create your gradient, add the following code between the <style></style> 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 have different implementations of the gradient function, so you'll have to include several versions of the code.
  4. Image titled 2609629 9 3
    4
    Make a directional gradient. If you'd rather create a gradient that isn't strictly vertical, you can add direction to the gradient in order to change the way the color shift appears. Do so by typing the following in between the <style></style> tags:[3] 
      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; }
    • You can play around with the "left" and "right" tags to experiment with different directions for your gradient.
  5. Image titled 2609629 10 3
    5
    Use other properties to adjust the gradient. There's a lot more that you can do with gradients.
    • For example, not only can you add more than two colors, you can also put a percentage after each one. This will allow you to set how much spacing you want each color segment to have. Here's a sample gradient that uses this principle: 
      background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
  6. Image titled 2609629 11 3
    6
    Add transparency to your colors. This will make the color fade. Use the same color to fade from the color to nothing. You'll need to use the rgba() function to define the color. The ending value determines the transparency: 0 for solid and 1 for transparent. 
      background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
  7. Image titled 2609629 12 3
    7
    Review your completed code. The code to create a color gradient as your website's background will look something like this: 
      <!DOCTYPE html>
<html>
<head>
<style>
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; 
}
</style>
</head>
<body>
</body>
</html>
    8. Advertisement
Method 3
Method 3 of 3:

Creating a Changing Background

  1. Image titled 2609629 13 3
    1
    Find your document's "html" header. It should be near the top of the document.
  2. Image titled 2609629 14 3
    2
    Add the animation property to the "body" element. Type the following into the space below the "body {" bracket and above the closing bracket:[4] 
          -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
    • The top line of text is for Chromium-based browsers while the bottom line of text is for other browsers.
  3. Image titled 2609629 15 3
    3
    Add your colors to the animation. Now you'll use the @keyframes rule to set the background colors through which you'll cycle, as well as the length of time each color will appear on the page. Again, you'll need separate entries for the different sets of browsers. Enter the following lines of code below the closed "body" bracket:[5] 
      @-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. You'll want these to stay uniform so the experience is the same on all browsers.
    • The percentages (0%, 25%, etc) are of the total animation length (60s). When the page loads, the background will be the color set at 0% (#33FFF3). Once the animation has played for 25% of of 60 seconds, the background will turn to #7821F, and so on.
    • You can modify the times and colors to fit your desired outcome.
  4. Image titled 2609629 16 3
    4
    Review your code. Your entire code for the changing background color should resemble the following: 
      <!DOCTYPE html>
<html>
<head>
<style>
body {
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
}
@-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;}
}   
</style>
</head>
<body>
</body>
</html>
    5. Advertisement

Community Q&A

  • Question
    How do I set a background color for a specific width?
    Community Answer
    Community Answer
    Use the background-size property inside of the "body" element. For example, "background-size: 300px 150px" makes the background 300 pixels wide and 150 pixels high.
  • Question
    It does not work. What can I do?
    UsernameHere11
    UsernameHere11
    Community Answer
    To make it black, try: body { background-color: #190707}
  • Question
    What is the correct HTML for adding a background color?
    Community Answer
    Community Answer
    My text goes here! Replace the html code above with your text and selected your preferred color.
Advertisement

Warnings

Advertisement

You Might Also Like

Use Font Color Tags in HTML
How to
Use Font Color Tags in HTML
Change Text Color in HTMLHow to Change Text Color in HTML and CSS
Define a CSS Class Style
How to
Define a CSS Class Style
Create a Simple Web Page with HTML
How to
Create a Simple Web Page with HTML
Run a HTML File in Visual Studio Code
How to
Run a HTML File in Visual Studio Code
Change the Button Color in HTML
How to
Change the Button Color in HTML
Create an Email Link in HTML
How to
Create an Email Link in HTML
Insert Spaces in HTML
How to
Insert Spaces in HTML
Add a Link to a Picture4 Ways to Add a Link to a Picture
Insert Images with HTML
How to
Insert Images with HTML
Run a HTML File
How to
Run a HTML File
Write HTML Code
How to
Write HTML Code
Get the Hex Code of a Color on Your Computer Screen
How to
Get the Hex Code of a Color on Your Computer Screen
Set a Background Image in HTMLAdd a Background Image to a Website: Step-by-Step Tutorial
Advertisement

References

  1. ↑ http://www.w3schools.com/css/css_background.asp
  2. ↑ https://css-tricks.com/css3-gradients/
  3. ↑ http://www.w3schools.com/css/css3_gradients.asp
  4. ↑ https://codepen.io/metagrapher/pen/tgcLl
  5. ↑ http://www.w3schools.com/css/css3_animations.asp

About This Article

Darlene Antonelli, MA
Written by:
Darlene Antonelli, MA
wikiHow Technology Writer
This article was co-authored by wikiHow staff writer, Darlene Antonelli, MA. Darlene Antonelli is a Technology Writer and Editor for wikiHow. Darlene has experience teaching college courses, writing technology-related articles, and working hands-on in the technology field. She earned an MA in Writing from Rowan University in 2012 and wrote her thesis on online communities and the personalities curated in such communities. This article has been viewed 1,495,893 times.
How helpful is this?
Co-authors: 34
Updated: February 6, 2023
Views: 1,495,893
Categories: Featured Articles | HTML
Advertisement