Question

In an HTML page, I want to use an SVG image as a background in a div element, with a pre element with text on top of of it (the background). The background image should scale with the containing div, while maintaining aspect ratio.

Can I accomplish this task with one of the SVG JavaScript libraries, such as jQuery SVG / Raphaël / svgweb?

The kind of structure I’d like to add a background image to:

<div>
  <pre>Some text...</pre>
</div>

Answer 1

You can use an SVG image as a CSS background, providing you only want to support recent browsers, use background-size to scale the image and maintain the aspect ratio. Here the image is applied directly to the pre, just to demonstrate:

pre {
    outline: 2px dashed black;
    padding: 1em;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

If you want to support IE8 and FF3.6 then you’ll have to resort to absolutely positioned elements as andrewmu suggests.