HTML and CSS Reference
In-Depth Information
width: 98px;
border: 1px solid black;
}
[...]
<div class="container">
<div class="floated">
.floated
</div>
<div class="main">
.main
</div>
</div>
Background images don't have to be used for clean rectangular columns
either. Any parent element right up to the document body is a great hook
for applying diagonals, ribbons, waves, or some other graphical appear-
ance that flows between the “physical” boundaries blocks or columns of
a page.
Layering Background Images
It is often the case that background images don't cleanly tile or they tile
for most of any given direction but then break or shift when interacting
with a content element. Imagine implementing a design that has some
background elements that repeat horizontally, different ones that repeat
vertically, some that don't repeat at all, and one more that repeats in
both directions. An inefficient solution would be to make one 10,000 by
10,000 pixel graphic and hope a browser never gets bigger than that.
A more flexible and efficient solution is to deconstruct the background
into smaller pieces and then find the element that is best suited to which
to apply each background image. The example in
Figure 7.4
(on the next
page) uses the
html
,
body
, and two other elements to overlay four sepa-
rate graphical pieces.
