CSS3 Background

❮ Previous Home Next ❯

There are several new properties to manipulate the background of an element.

In this chapter you will learn about these tree background related properties:




CSS background-size Property

The background-size property can be used to specify the size of the background images.

The size of the background images was determined by the actual size of the images.

The background image size can be specified by using the following values:

Example 1:

Hello World

The background image is displayed in its original size.

Example 2:

Hello World

Here, the background image is set to 200px wide and 100px high.

The background-size property is typically used to create full size background images that scale according to the size of viewport or witdh of the browser.

Example

#example1 {
  border: 5px dashed black;
  padding: 10px;
  background: url(smiley.png);
  background-repeat: no-repeat;
  background-size: auto;
}

#example2 {
  border: 5px dashed black;
  padding: 10px;
  background: url(smiley.png);
  background-repeat: no-repeat;
  background-size: 200px 100px;
}



CSS background-clip Property

The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

The following are possible values:

background-clip: border-box (default):

The background extends behind the border.

background-clip: padding-box:

The background extends to the inside edge of the border.

background-clip: content-box:

The background extends to the edge of the content box.

Example

#example1 {
  border: 5px dashed black;
  padding: 10px;
  background: red;
  background-clip: border-box;  
}

#example2 {
  border: 5px dashed black;
  padding: 10px;
  background: green;
  background-clip: padding-box; 
}

#example3 {
  border: 5px dashed black;
  padding: 10px;
  background: blue;
  background-clip: content-box;
}



CSS background-origin Property

The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.

The following are possible values:

background-origin: padding-box (default):

Hello World

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

background-origin: border-box:

Hello World

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

background-origin: content-box:

Hello World

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Example

#example1 {
  border: 5px dashed black;
  padding: 10px;
  background: url(bg-paper.jpg);
  background-repeat: no-repeat;
  background-origin: padding-box;
}

#example2 {
  border: 5px dashed black;
  padding: 10px;
  background: url(bg-paper.jpg);
  background-repeat: no-repeat;
  background-origin: border-box;
}

#example3 {
  border: 5px dashed black;
  padding: 10px;
  background: url(bg-paper.jpg);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Note: Note: The background-origin property is ignored if the value of background-attachment property is specified as fixed.







CSS Multiple Backgrounds

The CSS gives you ability to add multiple backgrounds to a single element.

The backgrounds are layered on the top of one another. The number of layers is determined by the number of comma-separated values in the background-image or background shorthand property.

Hello World

Lorem Ipsum is simply dummy text of the printing and typesetting industry.


Example

div {
  background: url(fox.png) right bottom no-repeat, url(bg-paper.jpg) left top repeat;
  padding: 15px;
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  background-size: 100px, auto;
  padding: 15px;
}



All CSS3 Background Properties

Property Description
background A shorthand property for all the background-* properties.
background-clip Sets whether an element's background extends underneath its border box, padding box, or content box.
background-image Specifies one or more background images for an element.
background-origin Sets the background's origin: from the border start, inside the border, or inside the padding.
background-size Sets the size of the element's background image.
❮ Previous Home Next ❯