You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
and images (<aclass="property" data-link-type="propdesc" href="#propdef-background-image" id="ref-for-propdef-background-image">background-image</a>) to use,
461
461
and how they are sized, positioned, tiled, etc. </p>
462
462
<p>The background properties are not inherited, but the parent box’s
463
-
background will shine through by default because of the initial <aclass="css"data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-transparent" id="ref-for-valdef-color-transparent">transparent</a> value on <aclass="property" data-link-type="propdesc" href="#propdef-background-color" id="ref-for-propdef-background-color①">background-color</a>. </p>
463
+
background will shine through by default because of the initial <spanclass="css">transparent</span> value on <aclass="property" data-link-type="propdesc" href="#propdef-background-color" id="ref-for-propdef-background-color①">background-color</a>. </p>
<p>The background of a box can have multiple <spanclass="index">layers</span> in CSS3. The number
466
466
of layers is determined by the number of comma-separated values in the <aclass="property" data-link-type="propdesc" href="#propdef-background-image" id="ref-for-propdef-background-image①">background-image</a> property. Note that a value of <aclass="css" data-link-type="maybe" href="#valdef-background-image-none" id="ref-for-valdef-background-image-none">none</a> still creates
<dd>The background is fixed with regard to the viewport. In paged
761
761
media where there is no viewport, a <aclass="css" data-link-type="maybe" href="#valdef-background-attachment-fixed" id="ref-for-valdef-background-attachment-fixed①">fixed</a> background is fixed
762
762
with respect to the <ahref="https://www.w3.org/TR/CSS2/page.html#page-box">page box</a> and therefore replicated on every page. <spanclass="note">Note that there is only one viewport per view.
763
-
Even if an element has a scrolling mechanism (see the <aclass="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> property <adata-link-type="biblio" href="#biblio-css2">[CSS2]</a>), a <aclass="css" data-link-type="maybe" href="#valdef-background-attachment-fixed" id="ref-for-valdef-background-attachment-fixed②">fixed</a> background doesn’t move with the
763
+
Even if an element has a scrolling mechanism (see the <aclass="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> property <adata-link-type="biblio" href="#biblio-css2">[CSS2]</a>), a <aclass="css" data-link-type="maybe" href="#valdef-background-attachment-fixed" id="ref-for-valdef-background-attachment-fixed②">fixed</a> background doesn’t move with the
However, if no boxes are generated for the element whose background
1369
1369
would be used for the canvas
1370
-
(for example, if the root element has <aclass="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display" id="ref-for-propdef-display">display: none</a>),
1370
+
(for example, if the root element has <aclass="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visuren.html#propdef-display" id="ref-for-propdef-display">display: none</a>),
1371
1371
then the canvas background is transparent. </p>
1372
1372
<pclass="note" role="note">Note that an element might be invisible, but still generate boxes.
1373
-
For example, if the element has <aclass="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-visibility" id="ref-for-propdef-visibility">visibility: hidden</a> but not <aclass="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display" id="ref-for-propdef-display①">display: none</a>,
1373
+
For example, if the element has <aclass="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-visibility" id="ref-for-propdef-visibility">visibility: hidden</a> but not <aclass="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visuren.html#propdef-display" id="ref-for-propdef-display①">display: none</a>,
1374
1374
boxes <em>are</em> generated for it and its background <em>is</em> used for the canvas. </p>
1375
1375
<p>If the canvas background is not opaque, what shows through is UA-dependent. </p>
1376
1376
<h4class="heading settled" data-level="3.11.1" id="root-background"><spanclass="secno">3.11.1. </span><spanclass="content"> The Canvas Background and the Root Element</span><aclass="self-link" href="#root-background"></a></h4>
@@ -1382,8 +1382,11 @@ <h4 class="heading settled" data-level="3.11.1" id="root-background"><span class
1382
1382
The root element does not paint this background again, i.e., the used
1383
1383
value of its background is transparent. </p>
1384
1384
<h4class="heading settled" data-level="3.11.2" id="body-background"><spanclass="secno">3.11.2. </span><spanclass="content"> The Canvas Background and the HTML <body> Element</span><aclass="self-link" href="#body-background"></a></h4>
1385
-
<p>For documents whose root element is an HTML <codeclass="html">HTML</code> element <adata-link-type="biblio" href="#biblio-html">[HTML]</a> or an XHTML <codeclass="html">html</code> element <adata-link-type="biblio" href="#biblio-xhtml11">[XHTML11]</a>: if the computed
1386
-
value of <aclass="property" data-link-type="propdesc" href="#propdef-background-image" id="ref-for-propdef-background-image⑤">background-image</a> on the root element is <aclass="css" data-link-type="maybe" href="#valdef-background-image-none" id="ref-for-valdef-background-image-none①">none</a> and its <aclass="property" data-link-type="propdesc" href="#propdef-background-color" id="ref-for-propdef-background-color⑦">background-color</a> is <aclass="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-transparent" id="ref-for-valdef-color-transparent①">transparent</a>, user agents must instead propagate
1385
+
<p>For documents whose root element is
1386
+
an HTML <codeclass="html">HTML</code> element
1387
+
or an XHTML <codeclass="html">html</code> element <adata-link-type="biblio" href="#biblio-html">[HTML]</a>:
1388
+
if the computed
1389
+
value of <aclass="property" data-link-type="propdesc" href="#propdef-background-image" id="ref-for-propdef-background-image⑤">background-image</a> on the root element is <aclass="css" data-link-type="maybe" href="#valdef-background-image-none" id="ref-for-valdef-background-image-none①">none</a> and its <aclass="property" data-link-type="propdesc" href="#propdef-background-color" id="ref-for-propdef-background-color⑦">background-color</a> is <spanclass="css">transparent</span>, user agents must instead propagate
1387
1390
the computed values of the background properties from that element’s first
1388
1391
HTML <codeclass="html">BODY</code> or XHTML <codeclass="html">body</code> child element. The used values of that <codeclass="html">BODY</code> element’s
1389
1392
background properties are their initial values, and the propagated values
<p>A box’s backgrounds, but not its <ahref="#the-border-image">border-image</a>,
1953
1956
are clipped to the appropriate curve (as determined by <aclass="property" data-link-type="propdesc" href="#propdef-background-clip" id="ref-for-propdef-background-clip⑧">background-clip</a>).
1954
-
Other effects that clip to the border or padding edge (such as <aclass="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①">overflow</a> other than <aclass="css"data-link-type="maybe" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible">visible</a>) also must clip to the curve. The content of
1957
+
Other effects that clip to the border or padding edge (such as <aclass="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-overflow" id="ref-for-propdef-overflow①">overflow</a> other than <spanclass="css">visible</span>) also must clip to the curve. The content of
1955
1958
replaced elements is always trimmed to the content edge curve. </p>
1956
1959
<p>Also, the area outside the curve of the border edge does not
1957
1960
accept pointer events on behalf of the element. </p>
<h3class="heading settled" data-level="5.6" id="border-radius-tables"><spanclass="secno">5.6. </span><spanclass="content">Effect on Tables</span><aclass="self-link" href="#border-radius-tables"></a></h3>
2046
-
<p>The <aclass="property" data-link-type="propdesc" href="#propdef-border-radius" id="ref-for-propdef-border-radius⑤">border-radius</a> properties do apply to <aclass="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-table" id="ref-for-valdef-display-table">table</a>, <aclass="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-inline-table" id="ref-for-valdef-display-inline-table">inline-table</a>, and <aclass="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-table-cell" id="ref-for-valdef-display-table-cell">table-cell</a> boxes
2049
+
<p>The <aclass="property" data-link-type="propdesc" href="#propdef-border-radius" id="ref-for-propdef-border-radius⑤">border-radius</a> properties do apply to <aclass="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-table" id="ref-for-valdef-display-table">table</a>, <aclass="css" data-link-type="maybe" href="https://www.w3.org/TR/CSS22/tables.html#value-def-inline-table" id="ref-for-value-def-inline-table">inline-table</a>, and <aclass="css" data-link-type="maybe" href="https://www.w3.org/TR/CSS22/tables.html#value-def-table-cell" id="ref-for-value-def-table-cell">table-cell</a> boxes
2047
2050
in separated borders mode (<aclass="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse">border-collapse: separate</a>).
2048
2051
When <aclass="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse①">border-collapse</a> is <spanclass="css">collapse</span>, they have no effect. </p>
<li>Fixed spread radius and margin radius calculations
2819
2822
to only apply adjustment factor when spread/margin is larger than border radius.
2820
-
<li>Defined handling of canvas background when root element has <aclass="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display" id="ref-for-propdef-display②">display: none</a>.
2823
+
<li>Defined handling of canvas background when root element has <aclass="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS22/visuren.html#propdef-display" id="ref-for-propdef-display②">display: none</a>.
2821
2824
</ul>
2822
2825
<p>A full <ahref="https://drafts.csswg.org/css-backgrounds-3/issues-lc-2014">Disposition of Comments</a> is available. </p>
2823
2826
<h3class="heading settled" data-level="9.3" id="changes-2012-07"><spanclass="secno">9.3. </span><spanclass="content"> Changes since the 24 July 2012 Candidate Recommendation</span><aclass="self-link" href="#changes-2012-07"></a></h3>
<h3class="no-num no-ref heading settled" id="index-defined-elsewhere"><spanclass="content">Terms defined by reference</span><aclass="self-link" href="#index-defined-elsewhere"></a></h3>
3356
3359
<ulclass="index">
3357
-
<li>
3358
-
<adata-link-type="biblio">[css-color-4]</a> defines the following terms:
<dd>Anne van Kesteren; et al. <ahref="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <ahref="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
3449
3438
<dtid="biblio-rfc2119">[RFC2119]
3450
3439
<dd>S. Bradner. <ahref="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <ahref="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
3451
-
<dtid="biblio-xhtml11">[XHTML11]
3452
-
<dd>Shane McCarron; Masayasu Ishikawa. <ahref="https://www.w3.org/TR/xhtml11/">XHTML™ 1.1 - Module-based XHTML - Second Edition</a>. 23 November 2010. REC. URL: <ahref="https://www.w3.org/TR/xhtml11/">https://www.w3.org/TR/xhtml11/</a>
0 commit comments