Я хочу, чтобы динамически показать фоновое изображение в div с текстом, как?

Question

В моем веб-приложении на основе ASP.NET MVC 3 / jQuery / HTML5 (я полагаю, что MVC не имеет значения в этом контексте), у меня есть элемент div в представлении, который обновляется текстом из операции, выполняемой в сервер. Когда работа сервера завершится, я бы хотел добавить к div фоновое изображение, символизирующее успех или неудачу.

Содержимое div имеет переменную ширину, поэтому я считаю, что изображение необходимо масштабировать (при сохранении пропорций). Я полагаю, что для того, чтобы изображение масштабировалось, оно также должно быть в формате SVG?

Как вы предлагаете мне обновить элемент div фоновым изображением в JavaScript / jQuery в соответствии с моими требованиями? Дайте мне знать, если мне нужно будет уточнить.

EDIT

Буду также признателен за бесплатные иконки для обозначения состояний успеха / неудачи:)

Answer 1

Мне удалось включить фоновый SVG через свойство CSS background-image.Кроме того, background-size: contain позволил фоновому изображению масштабироваться с помощью div (отлично!).Пример 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);
}

Рабочий пример см. В моем jsFiddle .

Я понимаю, что для этого решения требуются более новые браузеры, например IE9.

Answer 2

Во-первых, SVG не является обязательным и поддерживается не всеми браузерами.Подойдет любой формат изображения.Просто сохраните соотношение, если вы измените его размер.

В противном случае я бы использовал ajax-методы с jQuery и предпринял необходимые действия с результатом запроса ajax.

Например;

    $(document).ready(function(){
            $.ajax({
                    url: 'aa.html',
                    beforeSend: function() { $('#loader').fadeIn("slow"); },
                    complete: function() { $('#loader').fadeOut("slow"); },
                    success: function(data){
                            $("#page").html(data);
                            $("#page").fadeIn("slow");
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                            $("#page").html(jqXHR + ' ' + textStatus + ' ' + errorThrown);
                            $("#page").fadeIn("slow");
                    }
            });
    });

Вы можете изменить этот пример по своему желанию и можете перейти по ссылке, чтобы получить полную ссылку на ajax jQuery.

http://api.jquery.com/jQuery.ajax/