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:
p{ background-image: url("http://www.phpdocs.com/images/css3.png"); }


Example:
<!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:

Values Description
no-repeat It displays image only one time without any repetition
repeat-x It repeats the image horizontally for one row
repeat-y It repeats the image horizontally for one column
Basic Syntax:
h1{ background-image: url("http://www.phpdocs.com/images/css3.png"); background-repeat: no-repeat; }


Example:
<!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:

Values Description
fixed It preserves the image to be scrolled
scroll Default value. It allows to scroll the background image
local It allows to scroll the background image with the element's contents
Basic Syntax:
h1{ background-image: url("http://www.phpdocs.com/images/css3.png"); background-attachment: fixed; }


Example:
<!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:

top center bottom left right
Basic Syntax:
h1{ background-image: url("http://www.phpdocs.com/images/css3.png"); background-position: right bottom; }


Example:
<!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>