SVG z-index on IE7-8
===

I've created a simple page, and want to use an SVG image as a background. I know there are support issues with background SVG's in CSS, so I'm not going down that route.

The code I've got works fine for most browsers, except in IE7-8; where the SVG displays in front of everything else on the page.

Here is my code:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf=8">
      <title>Southpoint</title>
      <style type="text/css">
        body {
          margin: 0 auto;
          padding: 0;
          width:1000px;
          position: relative;
          font-family: Arial;
        }

        #blue_circle {
          position: absolute;
          top: -50px;
          left: -600px;
          z-index: 1;
        }

        .container {
          position: relative;
          z-index: 10;
          padding-top: 200px;
        }

      </style>
    </head>
    <body>

    <div class="container">
      <h1>Lorem ipsum</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis elit in odio luctus tincidunt.
        Pellentesque nec nisl augue. Ut eu quam sed purus imperdiet iaculis. Fusce eget mi id felis malesuada eleifend
        ut quis nisi. Donec quis orci purus. Duis ante nisi, fermentum vel dignissim vel, facilisis id mauris.
      </p>
    </div>

    <object id="blue_circle" data="blue_circle.svg" width="1200" height="750" type="image/svg+xml" />
    </body>
    </html>

And the SVG

    <svg version="1.1" baseprofile="full" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="main_blue" x1="0" x2="0.5" y1="0" y2="1">
          <stop stop-color="#1e2c88" offset="60%" />
          <stop stop-color="#2386d4" offset="100%" />
        </linearGradient>
      </defs>
      <circle cx="600" cy="150" r="600" fill="url(#main_blue)" />
    </svg>

So my question is: How do I get a SVG to be positioned behind the text in IE7-8 (other browsers are working correctly)?
