Background Properties

Help Center → HTML: Cascading Style Sheets (CSS) → Background Properties

You can affect a whole host of "background" properties of an element by using CSS. Please right-click and "save as" to download blue.gif to use for some of these examples.

  • Background Color Background color is one of the simplest background properties to affect. When you define the color, you can use the 16 colors from the Windows VGA palette (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow), hexadecimal values, or RGB values. The two latter options provide a wider range of colors. 
          <html>
       <head>
        <style type="text/css">
         body { background-color: purple; }
         h1 { background-color: #ffd700; }
         h2 { background-color: red; }
         p { background-color: rgb(249,1,254); }
        </style>
       </head>
       <body>
        <h1>This is header 1</h1>
        <h2>This is header 2</h2>
        <p>This is a paragraph</p>
       </body>
      </html>
  • Background Image Background image associates a background image with an element, often the body element of the Web page. If parts of the image are transparent, you can use this property along with background-color to achieve some nifty effects. 
          <html>
       <head>
        <style type="text/css">
         body { background-image: url("location/filename.jpg"); }
        </style>
       </head>
       <body>
       </body>
      </html>
  • Background Repeat Background repeat determines how background images tile in cases where the image is smaller than the space it is placed in. The default value is "repeat," which is used to denote both the vertical and horizontal dimensions. You can also manually modify the horizontal and vertical values using repeat-x and repeat-y, which can allow you to create some very pretty effects. 
          <html>
       <head>
        <style type="text/css">
         body
         { 
          background-image: url("location/filename.jpg");
          background-repeat: repeat-y;
         }
        </style>
       </head>
       <body>
       </body>
      </html>
  • Background Attachment Background attachment determines whether the background image is fixed or scrolls with the rest of the Web page. 
          <html>
       <head>
        <style type="text/css">
         body 
         {
          background-image: url("yourimage.gif");
          background-repeat: no-repeat;
          background-attachment: fixed;
         }
        </style>
       </head>
       <body>
        <br /><br />
        <p><b>It is important to remember that Netscape 4 does not support the "background-attachment" property, but Mozilla versions 1.0+ do.</b></p>
       </body>
      </html>
  • Background Position Background position specifies where your background image is positioned within the element that contains it. It takes two values, relative to the top and left hand corner of the window. 
          <html>
       <head>
        <style type="text/css">
         body
         { 
          background-image: url("location/filename.jpg");
          background-repeat: no-repeat;
          background-position: center center;
         }
        </style>
       </head>
       <body>
        <p><b>It is important to remember that Netscape 4 does not support the "background-position" property, but Mozilla versions 1.0+ do.</b></p>
       </body>
      </html>
Share this page Share