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).
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:
border-box - to position the background position 0,0 point at the top left of the border.
padding-box(default) - to position the background position 0,0 point at the top left of the padding.
content-box - to position the background position 0,0 point at the top left of the content.
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:
border-box(default) - to show full image, doesn't cut anything.
padding-box - cut the border background-image.
content-box - cut the border and padding background-image.
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.
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.