CSS3 background


May 04, 2021 03:00 CSS3


Table of contents


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.

#example1 {
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

#example1 {
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.

CSS3 background CSS3 background CSS3 background CSS3 background CSS3 background

Instance 1

Reset the background image:

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

Try it out . . .

CSS3 background CSS3 background CSS3 background CSS3 background CSS3 background

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

CSS3 background



CSS3 background CSS3 background CSS3 background CSS3 background CSS3 background

Locate the background picture in content-box:

Div
{
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.

CSS3 background CSS3 background CSS3 background CSS3 background CSS3 background

Set two background images in the body element:

body
{
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

#example1 {
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!