Others


Others


Background Properties - CSS


CSS Background properties are used to style the background of elements.

Property Description Values Example
background-color Specify the background color of the element. hex, rgb, rgba, color names 
body{
  background-color:#ccc;
}
background-image Set the background image of the element. URL, none, inherit 
body{
  background-color:url(bg.jpg);
}
background-repeat Repeats the background image vertically and horizontally. repeat, repeat-x, repeat-y, inherit, no-repeat 
body{
  background-color:url(bg.jpg);
  background-repeat:no-repeat;
}
background-position Set the position of background image. left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom 
body{
  background-color:url(bg.jpg);
  background-repeat:no-repeat;
  background-position:center center;
}
background-attachment Set the background image is scroll or fixed. fixed,scroll 
body{
  background-color:utl(bg.jpg);
  background-repeat:no-repeat;
  background-position:center center;
  background-attachment:fixed;
}
background-size Set the background image width. cover, auto, length(px,pt,cm), contain 
body{
  background-color:url(bg.jpg);
  background-repeat:no-repeat;
  background-size:cover;
}
Example 
<html>
  <head>
    <style>
      body{
        background-image:url(bg.jpg);
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center center;
      }
    </style>
  </head>
  <body>
   <p style='font-size:20px; line-height:40px;'>Balloons are pretty and come in different colors, different shapes, different sizes, and they can even adjust sizes as needed. But don't make them too big or they might just pop, and then bye-bye balloon. It'll be gone and lost for the rest of mankind. They can serve a variety of purposes, from decorating to water balloon wars. You just have to use your head to think a little bit about what to do with them.</p>
  </body>
</html>
Try it Yourself

Live Demo