CSS Layouts - Pro CSS Techniques - page 147

Scalable Text + Fixed Background Widths = Trouble
If the user resizes the text, the text will grow in length, but the background image is a fixed
size, as Figure 7-23 shows.

Figure 7-23. Fonts scale up but the background does not.

■

Tip If you are using Opera, zooming the page will scale the fixed-width background graphic too.

A workaround is to create a much larger image than appears on screen and set its position
using a negative em value. Then, as the user scales up the font size, doing so multiplies the
negative em value you set, thus pulling the image back along with the enlarged text. However,
this technique will not work if the overall page layout is a liquid one. (You need to decide what
it is that defines where the image sits—is it the text size or is it the page width?) Next, we'll look
at a fixed-width version of the example page that uses ems to set the position of the background
image; resizing the browser window no longer has any effect on the page width, so we only
need to cater for font resizes.

Fixed-Width Layout: Column Resizes with Font Resize
Here's the CSS for the fixed-width layout but with the background image that adjusts along
with the font size (note that we're only showing the parts of the CSS related to this part of the
page):

#wrapper {
margin:10px auto 0 auto;
background:#fff url(solid-bg-big.gif) repeat-y -10.5em ;
width:770px;
text-align:left;