Web Design with HTML and CSS

180

Working with CSS background images

Web Design with HTML and CSS Digital Classroom

The many wonders of the background image (continued)

You can use percentages for background images, particularly if the parent container has a fl exible

width. When using percentage values, the top-left corner is 0% 0% and the bottom-right corner

is 100% 100%. The following example uses percentages:

The image above, as indicated by the following code, is positioned 20 percent away from the top

and 40 percent away from the left:

background-position 20% 40%;

Using hacks to solve layout problems

CSS layouts that rely on fl oated boxes sometimes have unexpected results because various

browsers render the same content diff erently. When an elegant solution does not exist, you

need to resort to hacks. A hack is a solution where you use elements or properties within

HTML or CSS for a purpose other than their intended application. You’ll use a hack in the

following exercise to properly apply the background image that spans across your two columns.

In the previous exercise, you applied a background image to the innerwrap div and you

defi ned a height of 450 pixels. The problem with this method is that the two columns

inside the innerwrap div are longer than 450 pixels and it’s against best practices to have

a containing element smaller than its content. To address this problem, you will remove the

height value and then add new code to make the innerwrap work well in any situation.