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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...