The background-position property

In the previous article, we discussed all about the background-repeat property and how repeating the background image in both directions is the default behavior. In case you don't want the background to be repeated, it can be quite useful to control the position of the background. As you can see from the previous examples, the default position is the top, left corner, but this can be changed very easily, through the use of the background-position property:

<style type="text/css">
.box {
    background-image: url('http://css3-tutorial.net/images/blu_stripes.png');
    background-repeat: no-repeat;
    background-position: top center;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    text-align: center;
    font-weight: bold;
    font-size: 2em;
}
</style>

<div class="box">
    Hello, world!
</div>

Notice how I use two values, separated by a space, to indicate the desired position. The reason is that the background-position property takes a value of the type [position], which is used to indicate a 2D location. This means that we can use either a single keyword to indicate a side, e.g. top, a two keyword value, like I did in this example, or even a percentage or length value.

In the example above, I want the background to be placed in the center position, aligned to the top of the element, but there are many other possibilities when positioning the background. Just check out this next example, where I show you some of the many combinations:

<style type="text/css">  
.box {  
    background-image: url('http://css3-tutorial.net/images/blu_stripes.png');  
    background-repeat: no-repeat;  
    width: 200px;  
    height: 150px;  
    border: 1px solid black;  
    text-align: center;  
    font-weight: bold;  
    font-size: 1.5em;  
    margin: 10px;  
}  
</style>  

<div class="box" style="background-position: top;">  
    Top  
</div>  

<div class="box" style="background-position: top right;">  
    Top, right  
</div>  

<div class="box" style="background-position: bottom left;">  
    Bottom, left  
</div>  

<div class="box" style="background-position: 10% 50%;">  
    Percentage based  
</div>  

<div class="box" style="background-position: 10px 30px;">  
    Length based  
</div>  

<div class="box" style="background-position: 50% bottom;">  
    Combination  
</div>

Notice how we can use either one or two values, and we can use the position keywords (top, bottom, left, right and center) as well as percentages and lengths - we can even combine them like in the last example!

Summary

The flexibility of the background-position property allows you to position your backgrounds very precisely. Since the property accepts length and percentage based values, negative values are of course accepted as well. This is used frequently when combining several images, e.g. icons, into a large image (to save bandwidth and browser connections) and then only showing the relevant part of the image.