3 Methods to Set a Background Color with HTML & CSS

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

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

PDF download Download Article
  1. It should be near the top of the document.
  2. 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. 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. 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. 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

PDF download Download Article
  1. It should be near the top of the document.
  2. 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. 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. 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. 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. 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. 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

PDF download Download Article
  1. It should be near the top of the document.
  2. Type the following into the space below the "body {" bracket and above the closing bracket: 
       -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. 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: [4] 
       @ 
 -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. Your entire code for the changing background color should resemble the following: 
       <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 -webkit- 
 animation 
 : 
 colorchange 
 60 
 s 
 infinite 
 ; 
 animation 
 : 
 colorchange 
 60 
 s 
 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

Search
Add New Question
  • Question
    How do I set a background color for a specific width?
    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.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 15 Helpful 36
  • Question
    It does not work. What can I do?
    UsernameHere11
    Community Answer
    To make it black, try: body { background-color: #190707}
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 21 Helpful 20
  • Question
    What is the correct HTML for adding a background color?
    Community Answer
    My text goes here! Replace the html code above with your text and selected your preferred color.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 33 Helpful 30
See more answers
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      • Use online HTML pickers if you want a very specific color for your background. If, for example, you want the background to be the same color as your walls, you can match HTML colors with paint splotches at certain sites.
        Thanks
        Helpful 0 Not Helpful 0
      • If you want to use basic colors within your HTML code, you can type the colors' names without the pound sign (#) instead of using an HTML color code. For example: to create an orange background, you would type in background-color: orange; here.
        Thanks
        Helpful 0 Not Helpful 0
      • You can also set a an image as your website's background with HTML.
        Thanks
        Helpful 0 Not Helpful 0
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      Warnings

      Advertisement

      You Might Also Like

      How to
      Use Font Color Tags in HTML
      How to
      Change Text Color in HTML and CSS
      How to
      Create a Simple CSS Stylesheet Using Notepad
      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Write HTML Code
      How to
      Run a HTML File
      How to
      Insert Images with HTML
      How to
      Change the Button Color in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Open HTM Files
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      Advertisement

      Expert Interview

      Thanks for reading our article! If you’d like to learn more about dealing with html, check out our in-depth interview with Jessica Andzouana .

      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. ↑ http://www.w3schools.com/css/css3_animations.asp

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 1,524,800 times.

      Reader Success Stories

      • Gab G.

        Aug 30, 2017

        "Thanks, this is exactly what I was looking for, very clear. I can copy the code as well and it took me like 20 ..." more
      More reader stories Hide reader stories
      Share your story

      Is this article up to date?

      Advertisement