The community is working on translating this tutorial into Dutch, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".
If you are fluent in Dutch, then please help us - just point to any untranslated element inside the article and click the translation button to get started. Or have a look at the current translation status for the Dutch language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
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:
background-position: top center;
border: 1px solid black;
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:
border: 1px solid black;
<div class="box" style="background-position: top;">
<div class="box" style="background-position: top right;">
<div class="box" style="background-position: bottom left;">
<div class="box" style="background-position: 10% 50%;">
<div class="box" style="background-position: 10px 30px;">
<div class="box" style="background-position: 50% bottom;">
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!
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.