CSS - background-position

Advertisements

Previous Page
Next Page  

Description

Sets the initial position of the element's background image, if specified; values normally are paired to provide x, y positions; default position is 0% 0%.

Possible Values

  • percent
  • none
  • length
  • top
  • center
  • bottom
  • left
  • right

Applies to

block-level and replaced elements

DOM Syntax

object.style.backgroundPosition = "10 30";

Example

Following is the example which demonstrates how to set the background image position 100 pixels away from the left side.

<table style = "background-image:url(/images/pattern1.gif); background-position:100px;">
   <tr>
      <td>
         Background image positioned 100 pixels away from the left.
      </td>
   </tr>
</table>

Following is the example which demonstrates how to set the background image position 100 pixels away from the left side and 200 pixels down from the top.

Live Demo 
<html>
   <head>
   </head>

   <body>
      <p style = "background-image:url(/css/images/logo.png);  
         background-position:100px 200px;">
         The background image positioned 100 pixels away from the 
         left and 200  pixels from the top.up
      </p>
   </body>
</html>

It will produce the following result −

Advertisements