<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 
  xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:svg="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <head>
      <title>www.henningpingel.de: Using SVG to design a background for a webpage</title>

  <style type="text/css">
    
    div.beginInUpperLeftCorner{
      position: absolute; 
      top: 0px; 
      left: 0px; 
    }

    .blackBorder{
      border: 1px solid black; 
      margin-left: 200px; 
    }

    div.littleBox{
      width: 200px;
      height: 100px;
    }

    div.semiOpaqueBox{
      background-color: white; 
      opacity: .5;
    }

    div.innerHelperBox{
      position: relative; 
      top: 0px; 
      left: 0px; 
    }

    p, h1{
      font-family: sans-serif;
      padding: 10px; 
    }

    h1{
      font-size: 18px;
      padding-bottom: 0px;
    }

    p{
      font-size: 12px;
    }

  </style>

  </head>

  <body>
  
  <!-- svg background image (red, pink, white circles) -->

  <div class="beginInUpperLeftCorner" style="width: 600px; z-index: 1;">
    <svg:svg height="600" width="600">
      <svg:circle cx="50" cy="50" r="300" style="fill: red;" />
      <svg:circle cx="180" cy="180" r="100" style="fill: pink;" />
      <svg:circle cx="210" cy="210" r="40" style="fill: white;" />
    </svg:svg>
  </div>
  
  <!-- text content -->

  <div class="beginInUpperLeftCorner" style="z-index: 10;">
    <h1>Demo: Abusing inline SVG to design a background for a XHTML webpage</h1>
    <p>text is in front of red circle, this only works with Firefox 1.5 and Opera 8.x. 
        dummytext dummytext dummytext dummytext dummytext 
        dummytext dummytext dummytext dummytext dummytext 
        dummytext dummytext  dummytext dummytext dummytext 
        dummytext dummytext dummytext
    </p>

  <!-- box (whole box is semi opaque) -->

    <div class="littleBox semiOpaqueBox blackBorder">
       <p class="normalText">1) semi transparency using css opacity (only works with Firefox, not with Opera)</p>
    </div>

 
   <!-- second box (only background is semi opaque, font-color is still black) -->

    <div class="littleBox blackBorder" style="margin-top: 20px;">
      <div class="littleBox semiOpaqueBox innerHelperBox" style="z-index: 5;"></div>
      <div class="littleBox innerHelperBox" style="top: -100px; z-index: 6;">
         <p>2) semi transparency using css opacity, font color is not opaque (only works with Firefox, not with Opera)</p>
      </div>
    </div>

   <!-- thirdbox (scg circle as background) -->

    <div class="littleBox blackBorder" style="margin-top: 20px;">
      <div class="littleBox innerHelperBox" style="z-index: 5;">

        <svg:svg height="100" width="200">
          <svg:circle cx="130" cy="50" r="75" style="fill: lightblue;" />
        </svg:svg>

      </div>
      <div class="littleBox innerHelperBox" style="top: -100px; z-index: 6;">
         <p>3) box with svg circle as background (works with Firefox 1.5 and Opera 8.x)</p>
      </div>
    </div>


  <p>This page was last updated on December 14, 2005. It was created by Henning Pingel.</p>
  <p>Go <a href="http://www.henningpingel.de/SVG_Demos.89.0.html">back to the SVG demo page.</a></p>

  </div>
 

  </body>
</html>
