Add background-image fallback for browsers without <video>

kg · Aug 24, 2011 · 9c9543c · 9c9543c
1 parent 5c02645
commit 9c9543c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -23,7 +23,7 @@
         </p>
       </div>
       <div id="links">
-        <a class="link-box" href="http://jsil.org/">
+        <a class="link-box" href="http://jsil.org/" style="background-image: url(thumbnails/jsil.jpg)">
           <img src="images/jsil.png" alt="JSIL" title="JSIL">
           <p>A compiler that translates .NET games and applications into JavaScript.</p>
 
@@ -33,7 +33,7 @@
           </video>
         </a>
 
-        <a class="link-box" href="http://www.luminance.org/games/2010/02/17/spite-an-entry-for-gamma-4">
+        <a class="link-box" href="http://www.luminance.org/games/2010/02/17/spite-an-entry-for-gamma-4" style="background-image: url(thumbnails/spite.jpg)">
           <h3>Spite</h3>
           <p>A one-button dungeon crawler built for Kokoromi's Gamma 4 competition.</p>
 
@@ -43,7 +43,7 @@ <h3>Spite</h3>
           </video>
         </a>
 
-        <a class="link-box" href="http://infer.us/">
+        <a class="link-box" href="http://infer.us/" style="background-image: url(thumbnails/inferus.jpg)">
           <img src="images/inferus.png" alt="Inferus" title="Inferus">
           <p>An action-adventure game set within a sprawling underground labyrinth.</p>
 
@@ -53,7 +53,7 @@ <h3>Spite</h3>
           </video>
         </a>
 
-        <a class="link-box" href="rotator.html">
+        <a class="link-box" href="rotator.html" style="background-image: url(thumbnails/rotator.jpg)">
           <h3>Rotator <span style="font-size: 0.75em">(aka Chorae)</span></h3>
           <p>A relaxing arc-matching game.</p>
 
@@ -63,7 +63,7 @@ <h3>Rotator <span style="font-size: 0.75em">(aka Chorae)</span></h3>
           </video>
         </a>
 
-        <a class="link-box" href="chimaera.html">
+        <a class="link-box" href="chimaera.html" style="background-image: url(thumbnails/chimaera.jpg)">
           <h3>Chimaera</h3>
           <p>A 2D stealth action game.</p>
 

diff --git a/style.css b/style.css
@@ -61,6 +61,10 @@ div#content {
 
 	max-width: 384px;
 	max-height: 384px;
+
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: contain;
 }
 
 .link-box video {