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.

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

Build modern and responsive webpages

The Modern Web

Build modern and responsive webpages Try Front-end

The Modern Web will guide you through the most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. The plain-english explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated.

$ Check price
34.9534.95Amazon 4.5 logo(30+ reviews)

More Front-end resources