Latest web development tutorials

CSS3 background

CSS3 background

CSS3 contains several new background properties, providing greater control background elements.

In this chapter you will learn about the following background properties:

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

You will also learn how to use multiple background images.

Browser Support

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 background-image property

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.

Examples

# Example1 {
background-image: url (img_flwr.gif), url (paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}

try it"

You can set the number of different properties to different image

Examples

# Example1 {
background: url (img_flwr.gif) right bottom no-repeat, url (paper.gif) left top repeat;
}

try it"

CSS3 background-size property

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.

OperaSafariChromeFirefoxInternet Explorer

Example 1

Reset background image:

div
{
background: url (img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
}

try it"

OperaSafariChromeFirefoxInternet Explorer

Example 2

Stretch the background image to completely fill the content area:

div
{
background: url (img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}

try it"

CSS3's background-Origin attribute

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.



OperaSafariChromeFirefoxInternet Explorer

Examples

Positioning a background image in the content-box:

div
{
background: url (img_flwr.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}

try it"

CSS3 multiple background images

CSS3 allows you to elements

The add multiple background images.

OperaSafariChromeFirefoxInternet Explorer

Examples

Set two background images in the body element:

body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}

try it"

CSS3 background-clip property

CSS3 The background-clip property background is cut to start drawing from the specified location

Examples

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

try it"

New background properties

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