Step 1
We can use the Background Color property with Color Name or HEX-Value as shown below:
  1. body{ background-color:Black;}
or
  1. body{ background-color:#000;}
Step 2
We can set various background colors for paragraph, heading and division using the code shown below:
CSS code as shown below:
  1. h1 {background-color:#888822;}
  2. p {background-color:#E0FF00;}
  3. div {background-color:#888888;}
HTML code as shown below:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title>Demo</title>
  5. <link href="css-background-style.css" rel=Stylesheet type="text/css" />
  7. </head>
  8. <body>
  9. <body>
  11. <h1>CSS background-color example!</h1>
  12. <div>
  13. This is a text inside a div element.
  14. <p>This paragraph has its own background color.</p>
  15. We are still in the div element.
  16. </div>
  18. </body>
  19. </html>
Here's the Result as displayed by the Browser:
Styling-Background-in-HTML.png
Step 3
We can set an image also in the background as shown below:
CSS code as shown below:
  1. body {background: url('socials.png') 0 0 ;}
Note: By default, the background repeats an image for the entire page if we use the above code, whether the repeated word is written or not in the syntax.
Here's the result:
background-repeat-image-in-HTML.png
We can set the repetition of the image and position of the image using the code shown below.
No-Repeat-image-in-HTML.png
background-repeat-image-in-HTML.png
Repeat-Horizontally-in-HTML.png
Repeat-Vertically-in-HTML.png
Image-Position-in-HTML.png
Step 4
Background - Shorthand property
As you can see from the examples above, there are many properties to consider when dealing with backgrounds.
To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.
The shorthand property for the background is as shown above ie; body {background:#ffffff url('socials.png') no-repeat right top;}
Note:
When using the shorthand property the order of the property values is:

Summary

Through this article, we learned about various properties of background styling using CSS in HTML.