HTML and CSS Reference
In-Depth Information
New Features in CSS3
In CSS2.1, background images simply tile in the specified direction and are cut off at the edge if they don't fit
exactly. CSS3 addresses this issue with two new values for the background-repeat property. Both repeat the
background image a sufficient number of times to cover the available space. But they differ in how they then treat
the background.
space Any space left over is evenly distributed between the images.
round The images are rescaled to fit the background.
To demonstrate the difference, space_round.html adds a background image to two <div> elements like this:
#space, #round {
background-image: url(images/flower2.png);
background-color: #EFECCA;
/* other styles omitted */
#space {
background-repeat: space;
#round {
background-repeat: round;
As Figure 8-7 shows, IE 9 spaces out the background images in the <div> on the left, but it marginally scales
them down on the right to fit more in.
Figure 8-7. The new CSS3 values prevent background images from being clipped
In addition to the new values for background-repeat , the CSS3 specification allows you to specify either one
or two values.
In the case of one value, repeat-x and repeat-y work as before. In other words, they repeat the background
image across only one axis. However, other values are applied to both axes. Each style rule in space_round.html
uses a single value, so it applies in both directions.
Search WWH ::

Custom Search