HTML and CSS Reference
In-Depth Information
The radial gradient creates a simple, small, transparent circle with red on the
outside. The
background-size
property was used to force this circle into a 22-pixel
square, which then repeats. A couple of simple line patterns are then placed over
the top and spaced so they perfectly bisect the circles, horizontally and vertically.
This is a rather complex bit of code to write for a simple repeating pattern, but it
does show what is possible. You can find more aesthetically pleasing examples
at Lea Verou's fantastic CSS3 patterns gallery a
thttp://lea.verou.me/css3patterns.
MULTIPLE BACKGROUNDS IN IE?
Unfortunately, CSS3PIE's supremacy collapses when you consider multiple back-
ground support in past versions of IE. There isn't a decent way to add support for
multiple backgrounds to older IE versions without resorting to those nasty old
nested
<div>
s. And you don't want to go down that road!
So, the only way around this limitation is to provide alternative styling, either
via a conditional comment or via Modernizr, which you'll explore in Chapter 5.
TIP:
Providing multiple background image fallbacks is difficult
if you need the flexibility the multiple backgrounds provide in a
liquid layout, as in the Monty Python example. To make IE fallback styling
easier to work out, it's best to make the layout fixed in IE by serving a style
in your IE-targeted CSS, such as:
body { width: 1024px; }
.
