Setting the Background Image Position

The background-position property sets where the background image should be located.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: 10px double black; 
            background-image: url(http://java2s.com/Book/HTML-CSSImages/star.png); 
            background-size: 40px 40px; 
            background-repeat: no-repeat; 
            background-position: 30px 10px; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
Click to view the demo

The css code above tells the browser to draw the background image 30 pixels from the left edge and 10 pixels from the top edge.

You can use the predefined values. The predefined values are:

ValueDescription
topPositions the image at the top edge.
leftPositions the image at the left edge.
rightPositions the image at the right edge.
bottomPositions the image at the bottom edge.
centerPositions the image at the mid-point.

The first value controls the vertical position and can be top, bottom, or center. The second value controls the horizontal position and can be left, right, or center. If you only specify one keyword, the other value will be "center". The value could be:

  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom

The following css code only specifies one value: top

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: 10px double black; 
            background-image: url(http://java2s.com/Book/HTML-CSSImages/star.png); 
            background-size: 40px 40px; 
            background-repeat: no-repeat; 
            background-position: top; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
Click to view the demo

The following css code specifies two values: left top

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: 10px double black; 
            background-image: url(http://java2s.com/Book/HTML-CSSImages/star.png); 
            background-size: 40px 40px; 
            background-repeat: no-repeat; 
            background-position: left top; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Background:
  1. Setting Element Backgrounds
  2. Setting the Background Color and Image
  3. Setting the Background Image Size
  4. Setting the Background Image Position
  5. Setting the Attachment for the Background
  6. Setting the Background Image Origin
  7. Using the background Shorthand Property
Related: