Examples of the background-origin CSS3 Style Property
How the background-origin Style Property Works
The background-origin CSS3 style property is used to define where the background should be positioned in an image box. At first it may seem to be doing the same thing as the backgrond-clip property, so each example below will be beside the same box using background-clip.
Example with No Background Image
Love’s not time’s fool, though rosy lips and cheeks whose worth’s unknown, although his height be taken. It is the star to every wand’ring bark, admit impediments; love is not love but bears it out even to the edge of doom. Within his bending sickle’s compass come; or bends with the remover to remove. Whose worth’s unknown, although his height be taken.
Return to background-origin property page.
Example with Default Origin: border-box
The box on the left applies the border-box origin and clipping is not defined. On the right the box uses the border-box clipping and the origin is not defined.
Love’s not time’s fool, though rosy lips and cheeks whose worth’s unknown, although his height be taken. It is the star to every wand’ring bark, admit impediments; love is not love but bears it out even to the edge of doom. Within his bending sickle’s compass come; or bends with the remover to remove. Whose worth’s unknown, although his height be taken.
Love’s not time’s fool, though rosy lips and cheeks whose worth’s unknown, although his height be taken. It is the star to every wand’ring bark, admit impediments; love is not love but bears it out even to the edge of doom. Within his bending sickle’s compass come; or bends with the remover to remove. Whose worth’s unknown, although his height be taken.
Return to background-origin property page.
Example with padding-box Originping
The box on the left applies the padding-box origin and clipping is not defined. On the right the box uses the padding-box clipping and the origin is not defined.
Love’s not time’s fool, though rosy lips and cheeks whose worth’s unknown, although his height be taken. It is the star to every wand’ring bark, admit impediments; love is not love but bears it out even to the edge of doom. Within his bending sickle’s compass come; or bends with the remover to remove. Whose worth’s unknown, although his height be taken.
Love’s not time’s fool, though rosy lips and cheeks whose worth’s unknown, although his height be taken. It is the star to every wand’ring bark, admit impediments; love is not love but bears it out even to the edge of doom. Within his bending sickle’s compass come; or bends with the remover to remove. Whose worth’s unknown, although his height be taken.
Return to background-origin property page.
Example with content-box Originping
The box on the left applies the content-box origin and clipping is not defined. On the right the box uses the content-box clipping and the origin is not defined.
Love’s not time’s fool, though rosy lips and cheeks whose worth’s unknown, although his height be taken. It is the star to every wand’ring bark, admit impediments; love is not love but bears it out even to the edge of doom. Within his bending sickle’s compass come; or bends with the remover to remove. Whose worth’s unknown, although his height be taken.
Love’s not time’s fool, though rosy lips and cheeks whose worth’s unknown, although his height be taken. It is the star to every wand’ring bark, admit impediments; love is not love but bears it out even to the edge of doom. Within his bending sickle’s compass come; or bends with the remover to remove. Whose worth’s unknown, although his height be taken.
Return to background-origin property page.
And In Case You're Wondering
Here's the image:
This is Stormageddon, my new puppy.
