WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Backgrounds


CSS3 Backgrounds

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:

  • background-size
  • background-origin
  • background-clip

Browser Support

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.

Property
background-image
(with numerous backgrounds)
4.0 12.0 9.0 3.6 3.1 11.5
background-size 4.0
1.0 - webkit-
12.0 9.0 4.0
3.6 - moz-
4.1
3.0 - webkit-
10.5
10.0 - o-
background-origin 1.0 12.0 9.0 4.0 3.0 10.5
background-clip 4.0 12.0 9.0 4.0 3.0 10.5

CSS3 Multiple Backgrounds

CSS3 enables you to include different background-images for a component, through the background-image property.

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):

Example

#example1 {
    background-image: url(img_flo.jpg), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}
Try it yourself »

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 precedent above):

Example

#example1 {
    background: url(img_flo.jpg) right bottom no-repeat, url(paper.gif) left top repeat;
}
Try it yourself »

CSS3 background-size

The CSS3 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:

Example

#div1 {
    background: url(img_flo.jpgwer.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
}
Try it yourself »

The two other conceivable qualities for background-size are contain what's more, cover.

The 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.

The 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 contain and cover:

Example

#div1 {
    background: url(img_flo.jpgwer.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
#div2 {
    background: url(img_flo.jpgwer.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
Try it yourself »

Define Sizes of Multiple Background Images

The 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:

Example

#example1 {
    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;
}
Try it yourself »

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:

Example

html {
    background: url(img_flo.jpgwer.jpg) no-repeat focus settled;
    background-size: cover;
}
Try it yourself »

CSS3 background source Property

The CSS3 background-origin property indicates where the background-image is positioned.

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 background-origin property:

Example

#example1 {
    border: 10px strong black;
    padding: 35px;
    background: url(img_flo.jpg);
    background-repeat: no-repeat;
    background-origin: content-box;
}
Try it yourself »

CSS3 background-clip Property

The CSS3 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 background-clip property:

Example

#example1 {
    border: 10px specked black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}