03. Background Placement background-clip, background-origin

You can specify where in your container you want the background to be placed in. There are two CSS properties you can use:background-clip andbackground-origin.

Background Clip

The background-clip property tells where the containing element should start clipping the background. By default, it is set to border-box.

background-clip: border-box

background-clip: padding-box

background-clip: content-box

The image still starts at the top right corner.

The red color indicates portions that are cut off. Thus the border-box won't cut any of the image, while the padding-box and content-box does.

Background Origin

The background-origin tells where a background's top right corner should be placed.

This is very similar to background-clip in its option for values.

Thus, by having the same value for this property as background-clip, we can avoid an image from being cropped.

Build modern and responsive webpages

High Performance Web Sites

Build modern and responsive webpages Try Front-end

Want your web site to display more quickly? This book presents 14 specific rules that will cut 25% to 50% off response time when users request a page. Author Steve Souders, in his job as Chief Performance Yahoo!, collected these best practices while optimizing some of the most-visited pages on the Web.

$ Check price
29.9929.99Amazon 4.5 logo(63+ reviews)

More Front-end resources

Aching back from coding all day?

Prism Glasses

Aching back from coding all day? Try Back Problems

Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.

$ Check price
4.454.45Amazon 4 logo(128+ reviews)

More Back Problems resources