更改功能元素IMG到DIV背景

我有靜態的HTML結構和我的背景圖像是全屏每頁。增加了一個img標籤標籤後：更改功能元素IMG到DIV背景

<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。

我該如何解決？謝謝。

來源

2013-11-15 Slaythern Aareonna

ü想到什麼格的背景HTML？ –

嘗試使用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和body適用background如果上面沒有works看到this demo

來源

2013-11-15 09:27:32

我試過但不工作。 –

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

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

來源

2013-11-15 09:42:15 Parixit

設置像這樣的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

來源

2013-11-15 09:45:26

更改功能元素IMG到DIV背景

回答

相關問題