.background-div {

background-image: url(”image.png”);

background-repeat: no-repeat;

background-position: centre bottom;

}

5.5

As you can see from the above example, the image moves to the corresponding location based on our inputted value. Simple, right? Well, here’s where it gets a little more powerful and thus a bit more complicated. CSS allows us three different ways to specify the position for these values. They are as follows …

By keyword

The keyword values are left, centre, right, top and bottom. These keywords will always force the image to the furthermost point specified. For example, the keyword ‘left’ will force the image to the far left of the element (Figure 5.6).