CSS
Background Images

CSS can be used to apply background images to different parts of a web page. The property used for this purpose id background-color.

Background Images

Below examples will demonstrate the basic architecture of background image in CSS

Basic Syntax:
Copy Code 


p{ 
    background-image: url("http://www.phpdocs.com/images/css3.png");
}
Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style type="text/css">
          body{
            background-image: url("http://www.phpdocs.com/images/css3.png");
          }
        </style>
    </head>
  
    <body>
       ...
    </body>
</html>

The style of displaying the background image can easily controlled in CSS. Different options for controlling background image are as follows.

Background Repetition

The repetition of image in the background can be controlled by using background-repeat property.

The most commonly used values for this property are as follows:

ValuesDescription
no-repeatIt displays image only one time without any repetition
repeat-xIt repeats the image horizontally for one row
repeat-yIt repeats the image horizontally for one column
Basic Syntax:
Copy Code 


h1{ 
  background-image: url("http://www.phpdocs.com/images/css3.png"); 
  background-repeat: no-repeat; 
}

Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style type="text/css">h1{ 
            background-image: url("http://www.phpdocs.com/images/css3.png"); 
            background-repeat: no-repeat; 
        }</style>
    </head>
  
    <body>
       <h1>PHPDocs</h1>
    </body>
</html>

Background Attachment

Normally, the background image moves when the user scrolls up or down the web page, background-repeat property is used to specify the bacground attachment.

The most commonly used values for this property are as follows:

ValuesDescription
fixedIt preserves the image to be scrolled
scrollDefault value. It allows to scroll the background image
localIt allows to scroll the background image with the element’s contents
Basic Syntax:
Copy Code 


h1{
   background-image: url("http://www.phpdocs.com/images/css3.png");
   background-attachment: fixed; 
}
Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style type="text/css">
          h1{ 
              background-image: url("http://www.phpdocs.com/images/css3.png"); 
              background-attachment: fixed;
          }
        </style>        
    </head>
  
    <body>
       <h1>PHPDocs</h1>
    </body>
</html>

Background Position

It is possible to specify the position of the background image relative to the element behind which it is applied.

The most commonly used values for this property are as follows:

topcenterbottomleftright
Basic Syntax:
Copy Code 


h1{
   background-image: url("http://www.phpdocs.com/images/css3.png");
   background-position: right bottom; 
}
Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style type="text/css">
          h1{ 
              background-image: url("http://www.phpdocs.com/images/css3.png"); 
              background-position: right bottom;
          }
        </style>        
    </head>
  
    <body>
       <h1>PHPDocs</h1>
    </body>
</html>