Background Clip

CSS background-clip Property

The CSS background-clip property defines how far the background (color, image, or gradient) should extend within an element.

This property can have one of the following values:

border-box - The background extends behind the border. This is default

padding-box - The background extends to the inside edge of the border

content-box - The background extends to the edge of the content box

Example

Example Code

css

Try it Yourself

#div1 {
  border: 5px dotted black;
  padding: 35px;

   background-image: url(paper.gif);
  background-clip: border-box;

   }

#div2 {

   border: 5px dotted black;
  padding: 35px;

   background-image: url(paper.gif);
  background-clip: padding-box;

   }

#div3 {

   border: 5px dotted black;
  padding: 35px;

   background-image: url(paper.gif);
  background-clip: content-box;

   }

Example

Example Code

css

Try it Yourself

#div1 {
  border: 5px dotted black;
  padding: 35px;

   background-color: lightblue;
  background-clip: border-box;

   }

#div2 {

   border: 5px dotted black;
  padding: 35px;

   background-color: lightblue;
  background-clip: padding-box;

   }

#div3 {

   border: 5px dotted black;
  padding: 35px;

   background-color: lightblue;
  background-clip: content-box;

   }

CSS Advanced Background Properties

Property	Description
background	A shorthand property for setting all the background properties in one declaration
background-clip	Specifies the painting area of the background
background-image	Specifies one or more background images for an element
background-origin	Specifies where the background image(s) is/are positioned
background-size	Specifies the size of the background image(s)

CSS background-clip Property

Example

Example Code

Example

Example Code

CSS Advanced Background Properties

Interactive Code Examples

CSS Example 1

CSS Example 2