HTML and CSS Reference
In-Depth Information
FIGURE 4.39
The border is
definitely eye-catching, but
not in a good way.
so your only option is to fill in your background explicitly with a
background-color
or repeated
background-image
, and try to make it match the
border-image
.
Second, older versions of IE do not support
border-image
, so you should test
to make sure your content is still readable and looks OK in these older IE browsers.
With these two issues in mind, this
border-image
won't work at all in old ver-
sions of IE, and it looks dreadful in Chrome (
Figure 4.39
).
To fi fix t h e s e i s s u e s , I a d d e d a re p e at e d b ac k g ro u n d i m a g e t To my c To n t a i n e rs ,
which is basically just the center slice of the border image with the rough edges
removed. Initially, this looked ghastly because the background image extended
into the border. But I sorted out the problem with a nifty little property called
background-clip
. The code additions are as follows:
background: url(../images/parchment-bg.jpg);
background-clip: padding-box;
This snippet of code made the background look better again in Chrome,
although it wasn't perfect, and it made the content readable in Internet Explorer's
decrepit old ancestors. This example is di
cult because I am using a complicated
background image on a variable width container. Getting a seamless look would
be a lot easier to do in a simpler, fixed-width case!
you to specify that you want background content to be rendered all the way
out to the edges of the browser (
border-box
, which is also the default),
to the edges of the padding (
padding-box
), or to only the edges of the
content (
content-box
). This property comes in handy in certain situations
and is supported across all modern browsers.
These limitations mean that
border-image
usage will be slightly more restricted
than is ideal for the moment, but it is already usable to great effect in many situations.
