背景圖片的通關 - 曹景偉頁面搬回頂部

Question

在a website I have made

我有一個<header>和我的HTML文檔中<section>。

頭中有一個衰落的背景圖像，當新的圖像加載，如果你再往下的部分部分頁面即，該網站跳轉直接回到頂端正在發生的事情是。

有什麼辦法解決這個問題嗎？

我已經嘗試了一些CSS修復和喜歡，但只是沒有運氣。

的jQuery：

var counter = 0; 

// Playthrough Background Images 
    var imgArray = ['http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner1.jpg', 
     'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner2.jpg', 
     'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner3.jpg', 
     'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner4.jpg' 
    ] 
    var nextBG = "url(" + imgArray[counter] + ")"; 

    $('.home-page').css("background-image", nextBG); 

    setInterval(function(){ 
     counter++; 
     nextBG = "url(" + imgArray[counter % imgArray.length] + ")"; 
     $('.home-page').fadeOut('fast', function() { 
      $(this).css("background-image", nextBG).fadeIn('fast'); }) 
    }, 4000); // 4 second interval 

CSS

#header { 
    overflow:hidden; 
    height:auto; 
    background-position: center center; 
    background-repeat: no-repeat; 
    height:100%; 
    position: relative; 
} 
.no-touch #header { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-attachment: fixed; 
} 

感謝

編輯我想補充的jsfiddle，但該網站是建立在PyroCMS並會需要一段時間來拼湊。

Answer 1

使用Z-索引CSS屬性如下

.no-touch #header { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-attachment: fixed; 
    zindex:1000; or zindex:-1000; 
} 

哪個適合更好