mozilla

Revision 6340 of background-clip

  • Revision slug: CSS/background-clip
  • Revision title: background-clip
  • Revision id: 6340
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment page display name changed to 'background-clip'

Revision Content

{{ CSSRef() }}

Summary

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

-moz-background-clip is supported up to Gecko version 1.9.2 (Firefox 3.6). To support both, older and newer versions of Gecko (Firefox), you have to add both properties in the stylesheet (see examples).

If there is no background-image, this property has only visual effect when the border has transparent regions (because of {{ Cssxref("border-style") }}) or partially opaque regions; otherwise the border covers up the difference.

  • {{ Xref_cssinitial() }}: border-box
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*

-moz-background-clip:  [border | padding][, [border | padding]]*   /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */

Values

border-box {{ gecko_minversion_inline("2.0") }}
border (Firefox 1.0-3.6)
The background extends to the outside edge of the border (but underneath the border in z-ordering).
Default value, but see {{ anch("Browser compatibility") }} section below for special case Internet Explorer 7.
padding-box {{ gecko_minversion_inline("2.0") }}
padding (Firefox 1.0-3.6)
No background is drawn below the border (background extends to the outside edge of the padding).
content-box {{ gecko_minversion_inline("2.0") }}
The background is painted within (clipped to) the content box.

Examples

 pre {
   border: 5px navy;
   border-style: dotted double;
   background: #F8D575;
   /* The yellow background will not go behind the border */
      -moz-background-clip: padding;      /* Firefox 1.0-3.6 */
   -webkit-background-clip: padding-box;  /* Safari, Chrome */
           background-clip: padding-box;  /* Firefox 4.0+, Opera 10.5, Chrome */
 }

Browser compatibility

Browser Lowest version Support of
Chrome 1.0 -webkit-background-clip: padding | border | content
-webkit-background-clip: padding-box | border-box | content-box
1.0 background-clip: padding-box | border-box
background-clip: padding-box | border-box | content-box
Firefox (Gecko) 1.0-3.6 (1.2-1.9.2) -moz-background-clip: padding | border
4.0 (2.0) background-clip: padding-box | border-box | content-box
Internet Explorer 9.0 [*] background-clip: padding-box | border-box | content-box
Opera 10.5 background-clip: padding-box | border-box
Safari (WebKit) 3.0 (522) -webkit-background-clip: padding | border | content
-webkit-background-clip: padding-box | border-box | content-box
  • [*]  IE 7 (not other versions of IE) behaves like background-clip:padding if overflow: hidden | auto | scroll.
  • Konqueror 3.5.4 supports -khtml-background-clip.

Specifications

See also

  • {{ cssxref("-moz-background-size") }}
  • {{ CSS_Reference:Background() }}
  • {{ cssxref("clip") }}

{{ languages( { "de": "de/CSS/background-clip", "fr": "fr/CSS/-moz-background-clip", "ja": "ja/CSS/-moz-background-clip", "pl": "pl/CSS/-moz-background-clip" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> background-clip </code>CSS property specifies whether an element's background, either the color or image, extends underneath its border.</p>
<p><code>-moz-background-clip </code>is supported up to Gecko version 1.9.2 (Firefox 3.6). To support both, older and newer versions of Gecko (Firefox), you have to add both properties in the stylesheet (see examples).</p>
<p>If there is no background-image, this property has only visual effect when the border has transparent regions (because of {{ Cssxref("border-style") }}) or partially opaque regions; otherwise the border covers up the difference.</p>
<ul> <li>{{ Xref_cssinitial() }}:<code> border-box</code></li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre>background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*

-moz-background-clip:  [border | padding][, [border | padding]]*   /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */
</pre>
<h3>Values</h3>
<dl> <dt>border-box {{ gecko_minversion_inline("2.0") }}<br> border <small>(Firefox 1.0-3.6)</small></dt> <dd>The background extends to the outside edge of the border (but underneath the border in z-ordering).<br> Default value, but see {{ anch("Browser compatibility") }} section below for special case Internet Explorer 7.</dd> <dt>padding-box {{ gecko_minversion_inline("2.0") }}<br> padding <small>(Firefox 1.0-3.6)</small></dt> <dd>No background is drawn below the border (background extends to the outside edge of the padding).</dd> <dt>content-box {{ gecko_minversion_inline("2.0") }}</dt> <dd>The background is painted within (clipped to) the content box.</dd>
</dl>
<h3>Examples</h3>
<pre style="overflow:visible; border:5px navy; border-style:dotted double; background: #F8D575; -moz-background-clip:padding; -webkit-background-clip:padding; background-clip:padding-box;"> pre {
   border: 5px navy;
   border-style: dotted double;
   background: #F8D575;
   /* The yellow background will not go behind the border */
      -moz-background-clip: padding;      /* Firefox 1.0-3.6 */
   -webkit-background-clip: padding-box;  /* Safari, Chrome */
           background-clip: padding-box;  /* Firefox 4.0+, Opera 10.5, Chrome */
 }
</pre>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> <th>Support of</th> </tr> <tr> <td rowspan="2">Chrome</td> <td>1.0</td> <td><code>-webkit-background-clip: padding | border | content<br> <code>-webkit-background-clip: padding-box | border-box | content-box</code></code></td> </tr> <tr> <td>1.0</td> <td><code> background-clip: padding-box | border-box<br> background-clip: padding-box | border-box | content-box<br> </code></td> </tr> <tr> <td rowspan="2">Firefox (Gecko)</td> <td>1.0-3.6 (1.2-1.9.2)</td> <td><code>-moz-background-clip: padding | border</code></td> </tr> <tr> <td>4.0 (2.0)</td> <td><code>background-clip: padding-box | border-box | content-box<br> </code></td> </tr> <tr> <td>Internet Explorer</td> <td>9.0 [*]</td> <td><code>background-clip: padding-box | border-box | content-box</code></td> </tr> <tr> <td>Opera</td> <td>10.5</td> <td><code>background-clip: padding-box | border-box</code></td> </tr> <tr> <td>Safari (WebKit)</td> <td>3.0 (522)</td> <td><code>-webkit-background-clip: padding | border | content</code><br> <code>-webkit-background-clip: padding-box | border-box | content-box</code></td> </tr> </tbody>
</table>
<ul> <li>[*]  IE 7 (not other versions of IE) behaves like<code> background-clip:padding </code>if<code> overflow: hidden | auto | scroll</code>.<code><br> </code></li> <li>Konqueror 3.5.4 supports<code> -khtml-background-clip</code>.</li>
</ul>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="http://www.w3.org/TR/css3-background/#the-background-clip">CSS 3 Backgrounds and Borders #background-clip</a></li> <li><a class=" external" href="http://dev.w3.org/csswg/css3-background/#the-background-clip" title="http://dev.w3.org/csswg/css3-background/#the-background-clip">Latest Editor's Draft</a> (includes <code>content-box</code>)</li>
</ul>
<h3>See also</h3>
<ul> <li>{{ cssxref("-moz-background-size") }}</li> <li>{{ CSS_Reference:Background() }}</li> <li>{{ cssxref("clip") }}</li>
</ul>
<p>{{ languages( { "de": "de/CSS/background-clip", "fr": "fr/CSS/-moz-background-clip", "ja": "ja/CSS/-moz-background-clip", "pl": "pl/CSS/-moz-background-clip" } ) }}</p>
Revert to this revision