W3C home > Mailing lists > Public > public-css-commits@w3.org > November 2011

csswg/css3-images Overview.html,1.212,1.213 Overview.src.html,1.220,1.221

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 11 Nov 2011 23:03:42 +0000
To: public-css-commits@w3.org
Message-Id: <E1RP08M-00045W-NE@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv15700

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Split one of the image() examples into two, one concerned only with image fallback, and the other concerned with the fallback color.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.212
retrieving revision 1.213
diff -u -d -r1.212 -r1.213
--- Overview.html	11 Nov 2011 20:58:01 -0000	1.212
+++ Overview.html	11 Nov 2011 23:03:40 -0000	1.213
@@ -503,23 +503,37 @@
    <p>The rule below would tell the UA to load &lsquo;<code
     class=css>wavy.svg</code>&rsquo; if it can; failing that to load
     &lsquo;<code class=css>wavy.png</code>&rsquo;; failing that to display
-    &lsquo;<code class=css>wavy.gif</code>&rsquo;; and finally, if none of
-    the images can be loaded and displayed, to use the color &lsquo;<code
-    class=css>rgba(0,0,255,0.5)</code>&rsquo; to create a dimensionless
-    background image. For example, the browser might not understand how to
-    render SVG images, the PNG may be malformed, and the GIF might not exist
-    on the server and return an HTML 404 error page instead of an image.</p>
+    &lsquo;<code class=css>wavy.gif</code>&rsquo;. For example, the browser
+    might not understand how to render SVG images, and the PNG may be
+    temporarily 404 (returning an HTML 404 page, which the browser can't
+    decode as an image) due to a server move, so the GIF is used until one of
+    the previous problems corrects itself.</p>
 
-   <pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif", rgba(0,0,255,0.5));</pre>
+   <pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif");</pre>
+  </div>
 
-   <p>The &lsquo;<code class=property>background-size</code>&rsquo; property
-    specifies that dimensionless images by default stretch to cover the
-    entire background positioning area <a href="#CSS3BG"
-    rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>, so if none of the
-    specified images can be displayed the background will be painted
-    semi-transparent blue. As with any image, this fallback will be painted
-    over the &lsquo;<code class=property>background-color</code>&rsquo; (if
-    any).</p>
+  <div class=example>
+   <p>The fallback color can be used to ensure that text is still readable
+    even when the image fails to load. For example, the following code works
+    fine if the image is rectangular and has no transparency:</p>
+
+   <pre>
+body      { color: black; background: white; }
+p.special { color: white; background: url("dark.png") black; }</pre>
+
+   <p>When the image doesn't load, the background color is still there to
+    ensure that the white text is readable. However, if the image has some
+    transparency, that doesn't work, as they background-color will be visible
+    behind it. The &lsquo;<code class=css>image()</code>&rsquo; function
+    addresses this:</p>
+
+   <pre>
+body      { color: black; background: white; }
+p.special { color: white; background: image("dark.png", black); }</pre>
+
+   <p>Now, the black won't show at all if the image loads, but if for
+    whatever reason the image fails, it'll pop in and prevent the white text
+    from being set against a white background.</p>
   </div>
 
   <div class=example>

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.220
retrieving revision 1.221
diff -u -d -r1.220 -r1.221
--- Overview.src.html	11 Nov 2011 20:58:01 -0000	1.220
+++ Overview.src.html	11 Nov 2011 23:03:40 -0000	1.221
@@ -237,15 +237,25 @@
 	<p>Multiple arguments can be given separated by commas, in which case the function represents the first &lt;string> representing an image that the browser can successfully load and display.  The final argument can specify a &lt;color> to serve as an ultimate fallback; this can be used, e.g. for 'background-image', to ensure adequate contrast if none of the preceding &lt;image-decl>s can be used. If the final argument is a &lt;color>, it represents a solid-color image of the given color with no <i>intrinsic dimensions</i>.
 
 	<div class="example">
-		<p>The rule below would tell the UA to load ''wavy.svg'' if it can; failing that to load ''wavy.png''; failing that to display ''wavy.gif''; and finally, if none of the images can be loaded and displayed, to use the color ''rgba(0,0,255,0.5)'' to create a dimensionless background image.  For example, the browser might not understand how to render SVG images, the PNG may be malformed, and the GIF might not exist on the server and return an HTML 404 error page instead of an image.</p>
+		<p>The rule below would tell the UA to load ''wavy.svg'' if it can; failing that to load ''wavy.png''; failing that to display ''wavy.gif''.  For example, the browser might not understand how to render SVG images, and the PNG may be temporarily 404 (returning an HTML 404 page, which the browser can't decode as an image) due to a server move, so the GIF is used until one of the previous problems corrects itself.</p>
 
-		<pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif", rgba(0,0,255,0.5));</pre>
+		<pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif");</pre>
+	</div>
 
-		<p>The 'background-size' property specifies that dimensionless images
-		by default stretch to cover the entire background positioning area
-		[[CSS3BG]], so if none of the specified images can be displayed
-		the background will be painted semi-transparent blue. As with any image,
-		this fallback will be painted over the 'background-color' (if any).</p>
+	<div class='example'>
+		<p>The fallback color can be used to ensure that text is still readable even when the image fails to load.  For example, the following code works fine if the image is rectangular and has no transparency:</p>
+
+		<pre>
+body      { color: black; background: white; }
+p.special { color: white; background: url("dark.png") black; }</pre>
+
+		<p>When the image doesn't load, the background color is still there to ensure that the white text is readable.  However, if the image has some transparency, that doesn't work, as they background-color will be visible behind it.  The ''image()'' function addresses this:</p>
+
+		<pre>
+body      { color: black; background: white; }
+p.special { color: white; background: image("dark.png", black); }</pre>
+
+		<p>Now, the black won't show at all if the image loads, but if for whatever reason the image fails, it'll pop in and prevent the white text from being set against a white background.</p>
 	</div>
 
 	<div class='example'>
Received on Friday, 11 November 2011 23:03:48 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 11 November 2011 23:03:50 GMT