Измените функциональный элемент IMG на фон DIV

Question

Измените функциональный элемент IMG на фон DIV

0

У меня статическая структура HTML, а мои фоновые изображения - полноэкранные страницы на каждой странице. Добавлен тег img после тега:

<img src="img/about.jpg" id="static_bg" alt="">

И CSS:

#static_bg { position: fixed; top: 0; left: 0; z-index: -2;}
.staticbgwidth { width: 100%; }
.staticbgheight { height: 100%; }

И последний, мой JS-код:

$(window).load(function() {    

    var theWindow        = $(window),
    $bg              = $("#static_bg"),
    aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
            .removeClass()
            .addClass('staticbgheight');
        } else {
            $bg
            .removeClass()
            .addClass('staticbgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});

Да, он работает хорошо. Но я хочу, удалить IMG и добавить фон DIV. Когда я меняю это, не работайте с JS.

Как я могу это исправить? Спасибо.

Slaythern Aareonna 15 нояб. 2013, в 11:04

Источник

0

какой div фон HTML вы ожидаете?
Avinash Ware 15 нояб. 2013, в 09:27

Теги:

javascript

jquery

html

css

3 ответа

Ещё вопросы

Parixit · Answer 1 · 2013-11-15T08-25-00.000Z

<div class="your_div"></div>

.your_div {
    background:url('img/about.jpg') no-repeat;
    background-size:cover;
 }

Rohan Kumar · Answer 2 · 2013-11-15T08-13-00.000Z

Попробуйте использовать background property in CSS например,

#static_bg { background:url('img/about.jpg') ;
         position: fixed; top: 0; left: 0; z-index: -2;}

И Div нравится,

<div id="static_bg"></div>

Вы можете использовать background-size:cover и применять background на body если выше не works см. Эту демонстрацию

Mohsen Safari · Answer 3 · 2013-11-15T07-44-00.000Z

установите ID для вашего изображения следующим образом:

<img id="background-img" src="img/about.jpg" id="static_bg" alt="">

получите свой исходный код по этому коду:

var $bg-url = $("#background-img").attr("src");

затем удалите свой образ css следующим образом:

$("#background-img").css("display","none");

затем установите фон для этого элемента, который вы хотите. в этом случае $("#static_bg")

$("#static_bg").css("background-image",'url('"+$bg-url+'")');

jsFiddle здесь