Question

In my ASP.NET MVC 3/jQuery/HTML5 based web app (I figure MVC is irrelevant in this context), I have a div element in the view, which is updated with text from an operation running on the server. When the server operation finishes, I’d like to add a background image to the div symbolizing success or failure.

The containing div is of variable width, so I figure the image needs to scale (while conserving proportions). In order to allow the image to scale, I guess it needs to be SVG format as well?

How do you suggest I go about updating the div element with a background image, in JavaScript/jQuery, based on my requirements? Let me know if I need to specify further.

EDIT

I’d also appreciate recommendations of free of charge icons for symbolizing success/failure states 🙂

Answer 1

I was able to include a background SVG through the CSS property background-image. Furthermore, background-size: contain allowed the background image to scale with the div (excellent!). Example CSS:

div {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg);
}

For a working example, see my jsFiddle.

I understand this solution requires newer browsers, such as IE9.