cSS background

the css background properties are used to sets the background of an html elements.

css background properties

  • background-color
  • background-image
  • background-attachment
  • background-repeat
  • background-position

how set the background of an html elements using css language background property


Css background-color

the css background-color property is used to set the background color of an element. in css a color is specifies by:

  • color Name-"color_name 'red'"
  • color value-"rgb(0,34,34)"
  • hax value -"#aaffbb"
                               how set background-color of an html element
         
 <html>
         
    <head>
    
         <style  type="text/css"  >
         
        body{ background-color:#9a4b7c;} 
        
        div{ background-color:orange; ; padding:10px 10px;}
                             
        h1{ background-color:#eeeeee;padding:10px 10px;} 
        
        p{ background-color:rgb(192,203,32); padding:10px 10px; }
               
     </style>
     
   <body>
   
      <div>
      
           <p>this is paragraph  see css background-color effect   </p>
           
           <h1>this is first level heading see its background-color effect   </h1>
           
   </div>
   
     </body> </html>

css background-image

the background-image property is used to set the background image of an element

the background-image property not inherited.

when setting a background-image,one should also set a background color that will be used if the image is unavailable. when the image is available,it is overlaid on top of the background color.


Css background-repeat

the background-repeat property is used to control the repetition of an image in the background.

background-repeat property value repeat means the image is repeated both horizontally and vertically.

                                background image repeat  in vertically  and horizontally
        <html>
           
             <head>
             
         <style  type="text/css"  >
         
   body{ background-image:url("/project.jpg"); background-repeat:repeat;} 
   
   div{ background-image:url("/download.jpg");background-repeat:repeat-x;}
                         
   h1{ background-image:url("/css/project.jpg");background-repeat:repeat-y;}   
   
   p{ background-image:url("/page.jpg");background-repeat:no-repeat;}
         
    </style> </head>
    
  <body> 
  
   <div>
   
         <p>this is paragraph  see css background-repeat effect   </p>
         
         <h1>this is first level heading see its background-repeat effect   </h1>
         
 </div>
 
</body> </html>

by default,the background-image property repeats an image both horizontally and vertically.


Css background-attachment

the css background attachment determines whether a background image is fixed or scrolls with the rest of the page.

                         how fixed or scroll the background image                                              
     <html>
         
        <head>
          
         <style  type="text/css"  >
         
 body{ background-image:url("/background.jpg"); background-attachment:fixed;} 
                     
 div{ background-image:url("/backgrounds.jpg"); background-attachment:scroll;}
                         
      </style> </head>
      
      <body>
      
         <div>
         
             <p>paragraph  see css background-attachment effect </p>
             
             <h1>first level heading see its background-attachment effect </h1>
             
     </div>
     
 </body> </html>

backgrond shorthand property

the shorthand property for background is backgrond:

shorthand property is used to define all background properties in one single property.

shorthand css background property syntax :-

           
  background:  [background-color]  [background-image]  [background-repeat]
          
                    [background-attachment]   [background-position]
                    
          
                                 backgroud shorthand property.
       
       <html>
       
         <head>
         
         <style  type="text/css"  >
         
        body{ background:#3a5bcc  url("/background.jpg") repeat-x fixed 50% 50%;}
                           
     </style> </head>
     
     <body>
     
         <div>
         
   <p>this is paragraph  see css background shorthand property effect </p>
             
   <h1>this is first level heading see its background shorthand property effect </h1>
             
      </div>
      
  </body> </html>

Css background property examples

propertydescriptioncss
background sets all the background properties in one unit.
background-color sets the background color of an element.
background-image sets the background image of an element.
background-repeat sets control the repetition of an image in the background
background-attachment sets whether a background image is fixed or scrolls with rest of the page
background-position specifies the position of an image in the background.
background-sizespecifies the size of the background images.3
background-clipspecifies the painting area of the background images.3
background-originspecifies the positioning area of the background images.3