CSS3 contains a couple of new background properties, which permit more noteworthy control of the background element.
In this part you will figure out how to add different background-images to one element.
You will likewise find out about the accompanying new CSS3 properties:
The numbers in the table indicate the main program form that completely underpins the property.
Numbers pursued by - webkit-, - moz-, or - o-indicate the main form that worked with a prefix.
(with numerous backgrounds)
1.0 - webkit-
3.6 - moz-
3.0 - webkit-
10.0 - o-
CSS3 Multiple Backgrounds
CSS3 enables you to include different background-images for a component, through the
Multiple background-images are indicated utilizing a comma-isolated rundown of qualities for the background-image property.
The following precedent has two background-images, the primary picture is a blossom (adjusted to the bottom and right) and the second picture is a paper background (adjusted to the upper left corner):
background-image: url(img_flo.jpg), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
Multiple background-images can be determined utilizing either the person
background properties (as above) or the
background shorthand property.
The following precedent uses the
background shorthand property (same outcome as
background: url(img_flo.jpg) right bottom no-repeat, url(paper.gif) left top repeat;
background-size property enables you to indicate the measure of background images.
Before CSS3, the measure of a background-image was the genuine size of the picture. CSS3 enables us to re-use background-images in various contexts.
The size can be indicated in lengths, rates, or by utilizing one of the two watchwords: contain or cover.
The following model resizes a background-image to a lot littler than the first picture (utilizing pixels):
Original background image:
Pills and Potions
People will love you and bolster you when it's beneficial.
Resized background image:
Modern day maharaja
Without request, nothing exists. Without disorder, nothing evolves.
Here is the code:
background-size: 100px 80px;
The two other conceivable qualities for
contain watchword scales the background-image to be as huge as could reasonably be expected
(be that as it may, the two its width and its stature must fit inside the substance region). Thusly, contingent upon the extents of the background
picture and the background situating region, there might be a few territories of
the background which are not secured by the background image.
cover catchphrase scales the background-image with the goal that the substance territory is
totally secured by the background-image (the two its width and tallness are equivalent to or
surpass the substance region). All things considered, a few sections of the background-image may not be
unmistakable out of sight situating area.
The following model shows the utilization of
Define Sizes of Multiple Background Images
background-size property additionally acknowledges various qualities for background-size
(utilizing a comma-isolated rundown), when working with various backgrounds.
The following precedent has three background-images indicated, with various background-size an incentive for each image:
background: url(img_flo.jpg) left top no-repeat, url(img_flo.jpg) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
Full Size Background Image
Now we need to have a background-image on a site that covers the whole program window at all times.
The prerequisites are as follows:
- Fill the whole page with the picture (no white space)
- Scale picture as needed
- Center picture on page
- Do not cause scrollbars
The following model tells the top way to do it; Use the html component (the html component is dependably at any rate the tallness of the program window). At that point set a settled and fixated background on it. At that point alter its size with the background-size property:
background: url(img_flo.jpgwer.jpg) no-repeat focus settled;
CSS3 background source Property
background-origin property indicates where the background-image is
The property takes three diverse values:
- border-box - the background-image begins from the upper left corner of the border
- padding-box - (default) the background-image begins from the upper left corner of the padding edge
- content-box - the background-image begins from the upper left corner of the content
The following model outlines the
border: 10px strong black;
CSS3 background-clip Property
background-clip property indicates the artistic creation region of the background.
The property takes three diverse values:
- border-box - (default) the background is painted to the outside edge of the border
- padding-box - the background is painted to the outside edge of the padding
- content-box - the background is painted inside the substance box
The following precedent delineates the
border: 10px specked black;