Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

CSS background-clip Property

The background-clip property specifys how far the background color or image should extend within an element.

Box Model

To understand the background-clip property, you must first be familiar with the CSS "box model". In reality, no mater what its appearance, everything on a webpage is a box. Each box contains the four areas shown above. The content area of the box is where text and images appear. The padding area is the area around the content. This area may be set to zero. The padding area is transparent.

Around the content area and the padding area is the border. The style and size of the boarder my be set with the border CSS property. The border may be set to zero. Around the border is the margin area. Margin is the space between the element and adjacent elements. This area may be set to zero. The margin area is transparent.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

If the background-clip property is set to border-box or left to its default value, the background extends behind the border as shown below. Note that I defined the border-style property value to double so the background under the border would be visible.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

If the background-clip property is set to padding-box, the background extends to the inside edge of the border, as shown above.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

If the background-clip property is set to content-box, the background extends to the edge of the content area, as shown below. Note that I defined the padding property value to 16px so the content area would be visible.

Other settings for the background-clip property are initial, which sets it to its default value, and inherit which causes it to be set the same as parent element.

More CSS Quick Reference:
• Set the Font Slant
• nth-child Selector
• Set the box-sizing Property
• Class Selector
• Vertical Align an Element
• Set an Element's Clipping
• Set an Element's Overflow
• Descendant Selector
• Set the Font Properties
• Style the First Line

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268