Foundation HTML5 with CSS3

Embedding Media

Figure 5-26. The background image shows up exactly where the CSS told it to be

When you position a background image with percentages, you must factor in the size of the image as well
as the size of the element it decorates. A background image positioned 75% from the left side of the
element will move the reference point 75% from the left side of the image as well. This especially makes
sense when centering a background at 50%; the background is placed at a point halfway across the
element and halfway across the image, as illustrated in Figure 5-27.

Figure 5-27. A background image positioned 50% from the left and 50% from the top will be perfectly centered,
measuring the size of both the element and the image.

This isn’t true for lengths; non-percentage lengths always measure the distance from the top and left sides
of the element to the top and left sides of the image, as shown in Figure 5-28.