圖像消失與寬度：100％時，試圖使圖像響應

Question

我使用的位置：絕對;和z-索引。

我想要一個淡入新圖像的大背景圖像。我將在上面有一個表格，然後他們都必須能夠向上滾動。 （我現在只是使用一些文本而不是表單）。

我不想固定背景圖像 - 我希望它可以向上滾動任何東西。這就是爲什麼我沒有使用任何CSS背景代碼，因爲我只能找到固定背景的東西。

我得到的問題是我無法使圖像響應。只要我把寬度：100％;代碼在任何圖像消失的代碼。

$(function() { 
 
    $('.fadein img:gt(0)').hide(); 
 

 
    setInterval(function() { 
 
    $('.fadein :first-child').fadeOut() 
 
     .next('img') 
 
     .fadeIn() 
 
     .end() 
 
     .appendTo('.fadein'); 
 
    }, 4000); 
 
});

.fadein { 
 
    position: absolute; 
 
} 
 

 
.fadein img { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
#bg { 
 
    z-index: 1; 
 
} 
 

 
#fg { 
 
    z-index: 9; 
 
    position: relative; 
 
} 
 

 
.img-responsive { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="bg" class="fadein"> 
 
    <img class="img-responsive" src="images/1.jpg" /> 
 
    <img class="img-responsive" src="images/2.jpg" /> 
 
    <img class="img-responsive" src="images/4.jpg" /> 
 
    <img class="img-responsive" src="images/6.jpg" /> 
 
</div> 
 
<div id="fg" class="container"> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 
    <h1>text to enable scrolling</h1> 
 

 
</div>

Answer 1

爲了保持#bg DIV中的絕對圖像，你應該讓相對的。

.fadein {位置：相對;}或{#bg的位置是：相對;}