Figure 12-8 does have its problems, though. It violates some of the design
principles you explored in Chapter 8. For example, it isn’t as balanced as it
could be, tending to be weightier toward the top left, and it has no focal
point. Nothing is in the hot spots to attract the eye. What if we added a
background graphic?
<style>
body {
background-image: url(backfish.jpg);
background-repeat: no-repeat; }
This background contains a floating ball focal point, and also helps unify the
rest of the page with the light, abstract, circular design. To further tie things
together, adjust two of the divisions (text blocks) to remove their background
and drop the text into the background. These text blocks are also repositioned:
.biggestcolumn {
top: 25%;
padding: 10px;
font-size: medium;
left: 50%;
width: 40%;
text-align: justify;
Figure 12-8:
This design
avoids the
traditional
grid layout.
Sometimes
designs
like this
are called
free-form.
220 Part III: Adding Artistry: Design and Composition with CSS
