Last Updated: August 05, 2021
· elad2412

Say Hello to Background-Origin and Background-Clip, CSS3 new features!

Hello everybody, in this protip we will talk about two new extended properties that have been added in CSS3 to the background property.


Before this property, when we added background-image to element the image position was starting at left top of the padding in our element.

print screen of default background-origin position, if background-position set to 0 left,0 top. You can see the background-image starting on the padding area (at the red point).


Live Eample

The background-origin let you to decide where you want the background-position starting point to be, border or padding or content.

The new property of background-origin has 3 values according to the box-model:

  1. border-box - to position the background position 0,0 point at the top left of the border.

  2. padding-box(default) - to position the background position 0,0 point at the top left of the padding.

  3. content-box - to position the background position 0,0 point at the top left of the content.


Live Eample

In the upper screenshot/example you can see the influence of the background origin values.


As you can see in the last example, the background-origin is nice but something is still missing. The image positioned according the background-origin, but are over the right/bottom of the border/padding.

Background-clip is the answer! Using background-clip we can decide where to cut the background-image and it is the same as the background origin values as mentioned before .

The new property of background-clip has 3 values:

  1. border-box(default) - to show full image, doesn't cut anything.

  2. padding-box - cut the border background-image.

  3. content-box - cut the border and padding background-image.


Live Example

As you can see in the last example background-origin and background-clip works good together and most of the time you will use both with the same values, for example lets say you use both with the "content-box" value for positioning the background-image to the content and clipping the background image at the padding and the borders.

You can also make nicer things with this property, I have created another example: I center the background image and in the first row I stayed the background-size fully and played with the background origin & background-clip simultaneously and in the second row of this example I have stretched the background-image size to fit the entire box with background-size property and played again with background-origin and background-clip simultaneously.

Live Example

Screenshot results for this example


As you can see, you can make nice stuff with this two new features.

That's all for background-origin & background-clip.


  • IE - works from IE9 and above.
  • Work in all other major browsers.

If liked this post, you may also like:
- The New Background Position in CSS3.

That’s all, I hope you enjoy it.

If you like this post, I will be happy to get your UPVOTE. You are welcome to follow me or my team @Walla! R&D and endorse my skills.

Elad Shechter.

5 Responses
Add your response

Nice post! Didn't know these before.

(can't upvote, seems coderwall site's bug)

over 1 year ago ·


over 1 year ago ·

really nice post

over 1 year ago ·

Really good explanation Elad! It made me wonder why I had trouble understanding the concept beforehand.

over 1 year ago ·


over 1 year ago ·