CSS Background Image Repeat


« Previous Next »

CSS background-repeat

By default, the background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example

Set the background image for a page:/p> 

        
        <!DOCTYPE html>
        <html>
        <head> 
        <style> 

        body {
        background-image:: url("gradient_bg.png");
          }

        </style> 
        </head> 
        <body> 
      
        <h1>Hello World!</h1>
        <p>Strange background image...</p>


        </body>
        </html>
Result:
Example Image

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:

Example
        
        <!DOCTYPE html>
        <html>
        <head> 
        <style> 

        body {
            background-image: url("gradient_bg.png");
            background-repeat: repeat-x;

              }
  
        </head> 
        <body> 
      
        <h1>Hello World!</h1>
        <p>Here, a background image is repeated only horizontally!</p>


        </body>
        </html>
Result
Example Image

CSS background-position

The background-position property is used to specify the position of the background image.

Example

Position the background image in the top-right corner: 

      
        <!DOCTYPE html>
        <html>
        <head> 
        <style> 

        body {
          background-image: url("img_tree.png");
          background-repeat: no-repeat;
          background-position: right top;
          margin-right:  200px;

        }
  
      </style>     
      </head> 
      <body> 
    
      
      <h1>Hello World!</h1>
      <p>Here, the background image is only shown once. In 
      addition it is positioned away from the text.</p>
      <p>In this example we have also added a margin on 
      the right side, so that the background image will 
      not disturb the text.</p>
    
        </body>
        </html>
Result
Example Image