CSS Quickie: background-clip

Background aesthetics are a core of how we present appealing content to end-users. The background image property itself is the backbone of probably all sites today. You’d be hard-pressed to find an application, minimalism and all, that doesn’t rely on it in some way. So understanding how to style it creatively is pretty important.

One way in doing so is by utilizing background-clip. This property is used to define what space allocation your background image should cover. This ranges from the traditional border-box(default) to as little space that the text content inside it covers. Let’s look at some code.

#Element {
  width: 200px;
  height: 200px;
  background-image: url(../images/test.png);
}

#Element.BorderBox {
  background-clip: border-box;
}

#Element.PaddingBox {
  background-clip: padding-box; 
  // background image stops where padding exists
}

#Element.ContentBox {
  background-clip: content-box: 
  // background image covers content only
}

#Element.TextBox {
  background-clip: text; 
  // covers text only
}