Multiple Backgrounds Images
CSS3 allows you to use several background images for an element. You might use a texture, a gradient color, and images in the background.
By using a comma as the separator, we’re referencing two separate background images. Notice how, in the first case, it’s placed in the top left position (0 0), and, in the second, the top right position (100% 0).
Syntax:
.box {
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}
New Background Properties
CSS3 allows you to use several background images for an element. You might use a texture, a gradient color, and images in the background.
By using a comma as the separator, we’re referencing two separate background images. Notice how, in the first case, it’s placed in the top left position (0 0), and, in the second, the top right position (100% 0).
Syntax:
.box {
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}
New Background Properties
| Property | Description |
| background-clip | Specifies the painting area of the background images |
| background-size | Specifies the positioning area of the background images |
| background-origin | Specifies the size of the background images |
No comments:
Post a Comment