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 acplish 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>

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 acplish 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>

• javascript
• jquery
• html
• svg

• What browsers do you need to support, most only added support for using SVG as a background image in the last 12 months or so. – robertc Commented Sep 5, 2011 at 14:19
• @robertc At the moment I'm concentrating on IE9, current Chrome and current Firefox. I haven't been able to make neither IE9 nor Chrome show SVG as background image yet though :( Replace .svg with .png and it works. – aknuds1 Commented Sep 5, 2011 at 17:56
• Your question makes it sound like you want to generate the SVG using JavaScript and then use it as a background. Is that so, or did you only want to reference an existing SVG file hosted as a standalone file and use that as a background? – Phrogz Commented Sep 6, 2011 at 14:16
• @Phrogz I want to load an existing SVG image. – aknuds1 Commented Sep 6, 2011 at 14:23

3 Answers 3

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/wikipedia/mons/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.

You could always cheat and use position: absolute to put two divs in the same place.

SVG images are part of the DOM they cannot be a div background, instead they are an element just like a div.

to get scaling you should use some math to maintain aspect ratio, should be pretty easy, the word ratio is involved. That would be a clue on how to do that.

EDIT

It looks like I was wrong http://www.broken-links./2010/06/08/using-svg-in-background-image/ it can be a background.