CSS - background-position



The background-position property sets the initial position of the element's background image. The position of the image is relative to the value set by background-origin property.

Possible Values

  • <position>: Defines the x/y coordinates, which is relative to the edges of the element's box.

    • Defined using one to four values.

    • When two non-keyword values are passed, the first value specifies the horizontal position and the second value specifies vertical position.

    • When only one value is specified, the second is considered to be center.

    • When three or four values are specified, they are considered to be the offsets for preceeding keyword values.

  • One-value syntax: One of the following may be the value:

    • center: Keyword center, that centers the position.

    • top, left, bottom, or right: Specifies an edge against which the image is to be positioned. Other value is set to 50%.

    • <length> or <percentage>: Specifies the X coordinate relative to left edge of the element, and Y coordinate set to 50%.

  • Two-value syntax: One value defines the X coordinate and the other Y coordinate. One of the following may be the value:

    • top, left, bottom, or right: Whichever two values are specified, signifies the X and Y coordinates.

    • <length> or <percentage>: When other value is left or right, it defines Y coordinate and when top or bottom, it defines the X coordinate. When both values are length or percentage, then first define X and second Y coordinates, respectively.

    • top top | bottom bottom | left right | right left: Invalid values.

    • Order of paired keywords is not important, as browser reorders the values. Hence left top is same as top left.

    • Order is important while pairing a keyword with <length> or <percentage> values. Hence left 20px and 20px left are not same.

    • Default value is left top or 0% 0%.

  • Three-value syntax: Two are keyword values and third is an offset for the preceeding value.

    • top, left, bottom,right, or center: When left or right value is specified, signifies the X coordinate. When top or bottom is specified, signifies the Y coordinate.

    • <length> or <percentage>: When it is passed as second value, it is offset of first and when passed as third value, it is offset of second value.

    • Single length or percentage value is the offset for preceeding keyword value.

    • Combination of one keyword and two length or percentage values is invalid.

  • Four-value syntax: First and third are keyword values, specifying X and Y coordinates. The second and fourth values are offsets for the preceeding keyword value.

    • top, left, bottom, or right: First and third value as keywords. When left or right is given as first value, the first signifies X and other signifies Y value. When top or bottom is given as first value, then it defines the Y value and the other signifies X value.

    • <length> or <percentage>: When it is passed as second and fourth values, the second is offset of first keyword value and fourth is offset of second keyword value.

Percentage Values

Percentage offset of the background image's position is relative to the container. Refer the points given below for more clarification:

  • 0% means top or left edge of the image is aligned with top or left edge of the container.

  • 100% means bottom or right edge of the image is aligned with bottom or right edge of the container.

  • 50% centers the image horizontally or vertically with the container.

  • 75% 25% means the image will be placed 75% from left and 25% from top of the container.

Applies to

All the HTML elements.

DOM Syntax

object.style.backgroundPosition = "top 30%";

CSS background-position - One-value Syntax

Here is an example where the image is positioned using one-value syntax:

<html>
<head>
<style>  
   .position-right {
      background-image: url('images/tutimg.png');
      background-position: right;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
      <div class="position-right"></div>
</body>
</html>

CSS background-position - Different Types of Syntax

Here is an example showing all the different types of syntax formats:

<html>
<head>
<style>  
   div {
      background-color: gainsboro;
      background-repeat: no-repeat;
      width: 300px;
      height: 100px;
      margin-bottom: 12px;
   }

   .onevalue {
      background-image: url('images/smiley.png');
      background-repeat: no-repeat;
      background-position: bottom;
   }

   .twovalue {
      background-image: url('images/smiley.png');
      background-repeat: no-repeat;
      background-position: right top;
   }

   .threevalue {
      background-image: url('images/smiley.png');
      background-position: right 3em bottom;
   }

   .fourvalue {
      background-image: url('images/smiley.png');
      background-position: top 25% left 40%;
   }
</style>
</head>
<body>
   <div class="onevalue">One-value syntax</div>
   <div class="twovalue">Two-value syntax</div>
   <div class="threevalue">Three-value syntax</div>
   <div class="fourvalue">Four-value syntax</div>
</body>
</html>
Advertisements