Question

84

Can I display an SVG image as a div background with a JavaScript SVG library?

rated 0 times [ 85] [ 1] / answers: 1 / hits: 16746 / 13 Years ago, mon, september 5, 2011, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mira

Add To Favorites

Follow

Total Points: 460

Total Questions: 108

Total Answers: 99

Location: American Samoa

Member since Fri, Aug 26, 2022

2 Years ago

mira questions

1 Nodemon: app crashed waiting for file changes before starting... on Windows

Mon, Apr 4, 22, 00:00, 2 Years ago

1 Unhandled promise rejection: ReferenceError Can't find variable

Mon, Feb 14, 22, 00:00, 2 Years ago

1 momentjs datetime format on frontend with angular

Wed, Feb 9, 22, 00:00, 2 Years ago

1 How to check if element exists in DOM in Cypress?

Sun, Mar 28, 21, 00:00, 3 Years ago

1 How do I get the IP of a user in Nuxt's asyncData method?

Sat, Aug 3, 19, 00:00, 5 Years ago

View All

answered 13 Years ago kiley · Accepted Answer

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.