CSS3 Background Clip – The Visible Range of Background

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

The background-clip property specifies the painting area of the background image or background color.

The default value is:

background-clip: border-box;

This means that the background is clipped to the border box, i.e. the background is visible under the element’s border.

Other values for background clipping:

padding-box – clips the background at the outside edge of the element’s padding, i.e. the background is not visible under the element’s border

content-box – clips the background at the edge of the content box, i.e. does not apply the padding or border

If you are still not sure how to use the border-, padding- and content-box values, take a look at the box-sizing property example.

See a live example at cdpn.io/e/yamFI.

Browser Support

Let’s put it simply: IE9+. Polyfills for IE8 do not even exists and no wonder - it’s hard to find a situation where they would be necessary.


Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more