.background-div {

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

background-repeat: no-repeat;

background-position: 100px 50px;

}

5.8

And that’s all there is to it. Three simple but powerful ways to manipulate the position of our background image.

Just as a quick side-note, by default the background-position property has the value ‘center’ for both horizontal and vertical alignments. Also, if you leave off the vertical value for the property, the vertical alignment will be assumed to be ‘center’ too, as we can see in Figure 5.9.

5.9

This background-position property is a very powerful one that has a lot of use in the real world, so it’s important to understand it fully. Let’s work on an example together to put the valuable skills we just learned into practice.