HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
CSS3 contains several new background properties, providing greater control background elements.
In this chapter you will learn about the following background properties:
You will also learn how to use multiple background images.
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
Attributes | |||||
---|---|---|---|---|---|
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 can add a background image via background-image property.
Different background image and the image separated by commas, all images are displayed at the top of the first.
You can set the number of different properties to different image
background-size specifies the size of the background image. CSS3 ago, the background image size is determined by the actual size of the image.
CSS3 can specify a background image, let us re-specify the size of the background image in different environments. You can specify a percentage or pixel size.
You specify the size is relative to the width and height of the parent element percentage size.
Reset background image:
Stretch the background image to completely fill the content area:
background-Origin attribute specifies the location of the background image area.
content-box, can be placed inside the padding-box, and border-box area of the background image.
Positioning a background image in the content-box:
CSS3 multiple background images | |
CSS3 allows you to elements The add multiple background images. |
Set two background images in the body element:
CSS3 The background-clip property background is cut to start drawing from the specified location
order | description | CSS |
---|---|---|
background-clip | Provisions of the drawing area background. | 3 |
background-origin | Predetermined background image positioning region. | 3 |
background-size | Background image of a predetermined size. | 3 |