HTML and CSS Reference
In-Depth Information
can see the repeating image under the
section {
background-clip: border-box;
background-repeat: repeat;
Finally, content-box clips the background
to the content area:
section {
margin: 1em;
padding: 1em;
border: 1em dashed black;
background-clip: content-box;
Note that even though the background is
clipped, the image is still sized to the pad-
ding-box .
Scaling backgrounds uniformly may not always produce the
effect you want. Although the sliding doors technique provides
a workaround, there's a more straightforward CSS3 approach to
achieve the same effect: border-image . Let's look at that next.
Selective background scaling with border images
When you're trying to create flexible layouts, you often want a back-
ground that looks the same for most of its length, but with a certain num-
ber of pixels at either end that are slightly different. This is especially
true when you want to create a rounded element with a beveled effect.
Search WWH ::

Custom Search