Foundation HTML5 with CSS3

(Steven Felgate) #1
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.

Free download pdf