Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Backgrounds and Borders Advanced Backgrounds

Neba Asombang
Neba Asombang
5,459 Points
Posted by Neba Asombang
Neba Asombang
5,459 Points

How does the background-origin property differ from the background-clip property? They seem to perform the same function

I just took the css lesson on advanced backgrounds, and didn't seem to understand the difference between the background-origin property and the background-clip property.. can anyone help clarify this please.. ?

5 Answers

Unsubscribed User
Unsubscribed User
2,204 Points

According to the MDN:

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

while

The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.

background-clip
background-origin

Matteo Simeone
Matteo Simeone
13,587 Points
Matteo Simeone
Matteo Simeone
13,587 Points

I found here an interesting post that clarified me the difference I was struggling on too.

Look at differences between images. Hope this can help.

Lady Do While
Lady Do While
6,027 Points
Lady Do While
Lady Do While
6,027 Points

The background-origin defines where your image/color starts relative to the border, padding or content box. The background-clip property defines where you image ends (or is clipped) whether at the border, padding, or content box.

Take a look at this article for the best explanation and many visual examples: https://coderwall.com/p/h7dwaq/say-hello-to-background-origin-and-background-clip-css3-new-features

Christian Andersson
Christian Andersson
8,712 Points
Christian Andersson
Christian Andersson
8,712 Points

According to CSS3.info:

The background-origin property is used to determine how the background-position of a background in a certain box is calculated.

and

The background-origin property is used to determine how the background-position of a background in a certain box is calculated.

sakatagintoki
sakatagintoki
12,624 Points
sakatagintoki
sakatagintoki
12,624 Points

Glad wasn't just me that was confused. D: I should get used to looking things up on w3c and Mozzilla too.