Post
Ask Question

How to Styling-Background Using CSS in HTML

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" />  
  6.    
  7. </head>  
  8. <body>  
  9. <body>  
  10.    
  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>  
  17.    
  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.
  • For no-repetition of the image:
    1. body {background: url('socials.png') 00 no-repeat ; }  
No-Repeat-image-in-HTML.png
  • For repetition of an image:
    1. body {background: url('socials.png') 00 repeat; } 
background-repeat-image-in-HTML.png
  • For repeat horizontally:
    1. body {background: url('socials.png') 00 repeat-x; }  
Repeat-Horizontally-in-HTML.png
  • For repeat vertically:
    1. body {background: url('socials.png') 00 repeat-y; }  
Repeat-Vertically-in-HTML.png
  • For position of image:
    1. body {background: url('socials.png') 00 no-repeat;background-position: top right ; }  
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:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Summary

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


Similar Articles