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.

background-origin

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.

background-clip

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.

Support

• 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.