Background image positioning explained

[button link="http://kevindees.cc/wp-content/uploads/2010/06/download.zip" color="pink" newwindow="yes"] Download all examples[/button]

Let’s get to know the CSS background-position property. When you decide to use a background attachment, such as an image, background-position specifies its initial position.

Basically, the property tells your image where it should appear within the element we are working with. The default position for the image will always be the left top corner of the element.

If you want to change that position you need to declare the property in our CSS and add two values. The first value plots your image on the horizontal x coordinate and the second on the vertical y coordinate.

.object {
height: 150px;
width: 150px;
background-attachment: url(bg.gif);
background-repeat: no-repeat;
background-position: 0 0; }

 

[button link="http://kevindees.cc/examples/background-position//index.html" color="orange" newwindow="yes"] View Example[/button]

Even though we declared the position in the example, to (x)0px and (y)0px, you do not need to declare this position. Remember, if no position is declared the browser will assume (x)0px and (y)0px by default.

The Values

So, background-position can use up to two values. The values can be keywords, percentages, and lengths (e.g. px, em, etc.). If you declare only one value the second, the y coordinate, will always be 50%, or center.

.object { background-position: 100%; }

[button link="http://kevindees.cc/examples/background-position/index.html" color="orange" newwindow="yes"] View Example[/button]

To keep things simple I personally avoid keywords because they have percentage equivalents. I also, reject the notion of ems, because they are not necessary and add unneeded confusion. Remember, if you have a nail use a hammer.

Pixels

Pixels are a bit odd and not because of rendering, your browser is the real issue here.

Browsers use a vertically flipped x/y graph to plot pixels. They do this for a few reasons, but that is for another time and place. All you need remember is that the positive side of the chart starts at the left top corner and works its way to the right bottom.

When declaring your position with pixels the image anchor point will be the left top corner, not be be confused with the default image position.

.object { background-position: 0 -25px; }

[button link="http://kevindees.cc/examples/background-position//index.html" color="orange" newwindow="yes"] View Example[/button]

Percentages

If pixels are not working for you percentages might do the trick, if you don’t get tangled in their web.

When you declare a percentage as the value of the background-position property, it’s lined up based on two points.

  1. The percentage of the image, as declared
  2. The percentage of the element, as declared

This is hard to explain, but basically, when you declare a percentage it takes that percent, say 75%, and lines the axis of the image, at 75%, to that of the element, at 75%.

Let’s imagine together that we have a long and short stick. There they are, on a table, horizontal to your shoulders and parallel to one another, separated by about an inch.

I hand you a brand new vibrant red sharpie.

Now mark the long stick with the red sharpie, about 75% down from the left side. Next, pick up the small stick and measure down from left side, about 75% of its width, and mark the spot with the same sharpie.

Perfect! Now take both sticks and line them up so the marks are next to each other. That is how the browser lines up background images to their elements.

It does not matter if the image or the element is bigger, it doesn’t matter if they are the same size. That’s how it works, nice and simple… just hard to explain.

.object { background-position: 75% 0; }

[button link="http://kevindees.cc/examples/background-position//index.html" color="orange" newwindow="yes"] View Example[/button]

The only time percentages get really confusing is when you declare say… 200% or -10%.

Defaults

  • If you only specify one value the second is set to 50%, or center
  • Images always assume their position at the left top

Reminders

  • x/y graph is flipped on its head
  • Percentages apply to both the image and element and line up at their respective percentages
  • When declaring values the horizontal plot is first, the second is vertical
  • If you want your image to be in the left top corner you do not need to set the property
  • Avoid, keywords and ems

Learn More