2.6. Placing a Background Image
Problem
You want to position a background image in a web page.
Solution
Use the
background-position
property to set the location of the background image. To place an
image that starts 75 pixels to the right and 150 pixels below the
upper-left corner of the viewport (see Figure 2-11),
use the following CSS rule:
body { background-image: url(bkgd.jpg); background-repeat: no-repeat; background-position: 75px 150px; }
Figure 2-11. The background placed precisely 75 pixels from the right and 150 pixels from the upper left corner of browser’s viewport
Discussion
The background-position
element contains two
values separated by a space. The first value of the pair sets the
origin point along the y axis, while the second value sets the point
on the x axis. If only one value is given, that value is used for the
horizontal position and the vertical position is set to 50%.
The Solution used pixel units to determine the placement of the
background image; however, you also can use percentages. A value of
50%
for background-position
means that the browser places the image in the dead center of the
viewport, as shown in Figure 2-12, while the values
0%
and 100%
place the image in
the upper left and lower right corner, respectively.
Figure 2-12. The background image centered ...
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.