CSS3 background
May 04, 2021 CSS3
Table of contents
3. CSS3 background-image property
4. CSS3 background-size property
7. CSS3's background-Origin property
9.. More than one background image for CSS3
CSS3 background
CSS3 has updated several new background properties to provide greater background element control, allowing you to make more beautiful styles.
In this section, you'll learn about four background attributes:
- background-image
- background-size
- background-origin
- background-clip
You'll also learn how to use multiple background images.
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
| Property | |||||
|---|---|---|---|---|---|
|
background-image
(with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size |
4.0
1.0 -webkit- |
9.0 |
4.0
3.6 -moz- |
4.1
3.0 -webkit- |
10.5
10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 background-image property
Background pictures can be added in CSS3 through the background-image property.
The different background images and images are separated by commas, and the first one appears at the top of all the pictures.
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Try it out . . .
You can set several different properties for different pictures
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
Try it out . . .
CSS3 background-size property
Background-size specifies the size of the background image. Before CSS3, the background image size was determined by the actual size of the image.
CSS3 can specify the background picture, let's re-specify the size of the background picture in different environments. You can specify a pixel or percentage size.
The size you specify is the size as a percentage of the width and height of the parent element.
Instance 1
Reset the background image:
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
Try it out . . .
Instance 2
Stretch the background image to completely fill the content area:
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
Try it out . . .
CSS3's background-Origin property
The background-Origin property specifies the location area of the background image.
Background images can be placed in content-box, padding-box, and border-box areas.
Locate the background picture in content-box:
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
Try it out . . .
More than one background image for CSS3
CSS3 allows you to add multiple background images to an element.
Set two background images in the body element:
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
Try it out . . .
CSS3 background-clip property
The background-clip background clipping property in CSS3 is drawn from the specified location
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Try it out . . .
The new background property
| Order | Describe | Css |
|---|---|---|
| background-clip | Specifies the drawing area of the background. | 3 |
| background-origin | Specify the positioning area of the background picture. | 3 |
| background-size | Specify the size of the background picture. | 3 |
In the new CSS3 background properties, you can not only specify the drawing area of the background, but also surprise the positioning area and size of the background picture!