CSS Property background-position








background-position property sets the position of the background's origin image. When percentage or length values are used, the first is the horizontal, and the second the vertical.

If only one value is used, it sets the horizontal, the missing value is default to be either center or 50%. Negative values are permitted, and may place the origin image outside the element's content area.

Summary

ItemValue
Initial value 0% 0%
Inherited No.
Version CSS1
JavaScript syntax object.style.backgroundPosition="center"
Applies to Block-level and replaced elements.




CSS Syntax

background-position: horizontal vertical

where horizontal is

  percentage | length | left | center | right 

and vertical is

  percentage | length | top | center | bottom 

Property Values

The property values are listed in the following table.

Value Description
left top left top, if one value provided, the other value is "center".
left center left center, if one value provided, the other value is "center".
left bottomleft bottom, if one value provided, the other value is "center".
right top right top, if one value provided, the other value is "center".
right center right center, if one value provided, the other value is "center".
right bottom right bottom, if one value provided, the other value is "center".
center top center top, if one value provided, the other value is "center".
center center center center, if one value provided, the other value is "center".
center bottom center bottom, if one value provided, the other value is "center".
x% y% x% is the horizontal position and y% is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If one value provided, the other value will be 50%. Default: 0% 0%
xpos ypos xpos is the horizontal position and ypos is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If one value provided, the other value will be 50%. You can mix % and positions
inherit inherit the background-position property from the parent element




Browser compatibility

background-position Yes Yes Yes Yes Yes

Example

An example showing how to use background-position CSS property.

<!DOCTYPE html>
<html>
<head>
<style>
body<!--from   w  ww  .  j av a2  s .c o  m-->
{ 
    background-image:url('http://java2s.com/style/download.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 
}
</style>
</head>

<body>
<p>This is a paragraph.</p>
</body>
</html>

Click to view the demo

Example for left top value

The following css code specifies two values: left top

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { <!-- www .  j a va2  s .c  o  m-->
            border: 10px double black; 
            background-image: url(http://java2s.com/style/download.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

Example 2

The following css code only specifies one value: top.

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { <!--  w w w.  j  a v a2s  . co  m-->
            border: 10px double black; 
            background-image: url(http://java2s.com/style/download.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

Example 3

The background-position property tells browser where the background image should be located. This is useful when image is not repeating. The following code sets background position using pixel value.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from   ww  w  .  j a v  a2s  .c o  m-->
  background-image: url(http://www.java2s.com/style/download.png);
  background-repeat: no-repeat;
  background-position: 30px 10px;
}
</style>
</head>
<body>
  <p>This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  
  This is a test. <br/>
  This is a test. <br/>
  
  </p>
</body>
</html>

Click to view the demo

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

It set the position using lengths, but you can also use the predefined values shown in the following list.

  • top - Positions the image at the top edge.
  • left - Positions the image at the left edge.
  • right - Positions the image at the right edge.
  • bottom - Positions the image at the bottom edge.
  • center - Positions 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.