Question

我有静态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。

我该如何解决？谢谢。

Answer 1

尝试使用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，请this demo

Answer 2

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

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

Answer 3

为您的图片设置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 is here

将功能元素IMG更改为DIV背景

3 个答案: