bugl
bugl
HomeLearnPatternsPathsSearch
HomeLearnPatternsPathsSearch

Loading lesson path

Learn/CSS/Advanced Styling
CSS•Advanced Styling

CSS Background Clip

Flash cards

Review the key moves

1/4
Core idea

What is the main idea behind CSS Background Clip?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___-clip
3Order

Put the learning moves in the order that makes the concept easiest to apply.

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

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
background-clip
background-clip

CSS Advanced Background Properties

PropertyDescription
backgroundA shorthand property for setting all the background properties in one declaration
background-clipSpecifies the painting area of the background
background-imageSpecifies one or more background images for an element
background-originSpecifies where the background image(s) is/are positioned
background-sizeSpecifies the size of the background image(s)

Previous

CSS Background Origin

Next

CSS Colors