Is there any difference between the **background-clip** and the **background-origin** property?

The background-origin defines where your image/color starts, whether at 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.

Small images wont normally need to be clipped or scaled down, whereas setting a border-origin and then not clipping it could look very weird. Thumbnails, like Zhihao Wang mentioned above is a practical example

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

Hi, I totally get it now. Thanks for your time dude. Merry Christmas to you too.

Hello Samuel,

These background properties might seem very similar at first glance, but they do have a significance difference..

The background-clip property specifies how the background should be displayed. To be more specific, I'll list some examples.

#home{
     background-image: url('insertimghere');
     background-clip: content-box;
}

This will make it so that the background image will only take up the space of the content. This means that all margin and padding applied to this element will not have that background to it. Basically by specifying content-box for the background-clip, it is where you background is 'clipped' off from so to speak.

In practice, the default value of background-clip is border-box, where the background covers the whole element, here's a link where you can play around with these values and get a sense of what it does: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-clip

Background-origin is more or less where the background-position should be relative to. It basically sets the origin or where X and Y equal to 0 relative to the value given. Here's an example.

#home{
   background-image: url('insertimghere');
   background-origin: content-box;
}

This means that that where X and Y equals zero will be the top left of the content box only. It will look like it's indented in because the content box does not include padding or margins. Here's a reference link worth checking out: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-origin

I know these may seem very similar because they look like they do similar things, but it is all dependent on what you need to do.

cheers.

Hi, thanks for your reply. I think I understand this. But as you said it depends on what you need to do. So could you give another example where it would be better to use background-clip over background-origin and vise versa? Thanks.

Hi I didn't really get it when you explained it, but after looking at the links you sent I think I got it. the thing is I understand the values and what they do. I was more confused about their application. Because you see because in the course it was used to clip and size a background image that was used for the entire background, my brain sort of got stuck that it will only work for full background images or colors etc. But the example with the smiley made it all clear for me. Huge thanks dude.