Jump to content

CSS3: background-origin property versus background-clip property


Recommended Posts

Background-clip is used to specify what area of the element will show the background. When set to content-box, for example, the background will only appear in the content-box of that element. If there is padding on the element, the padding will not have a background. By default, this value is set to border-box, meaning the background will extend all the way to the edge of the border.


Background-origin is used to specify what part of the background to show in the element. This is used when the image is larger than the element. It is useful for such situations as creating different states of a button (ie, normal vs hover). You could have an image twice the height of the button with both states on it and use the background-origin to determine which state to show.


Background-clip limits the area of the element to have a background, while background-origin limits the area of an image to use as a background.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...