無法更改使用視差滾動的圖像寬度

我無法更改使用從教程複製的視差滾動代碼的圖像寬度。我知道在圖像的例子中，div盒和圖像排列不完美，但由於某種原因，我的壁紙大小的圖像，我沒有使用，因爲它太大，因爲一個例子完美排隊，所以不用擔心div間距問題。無法更改使用視差滾動的圖像寬度

的jsfiddle - https://jsfiddle.net/fouvdjm8/1/

HTML代碼

<html> 
<!doctype html> 
<head> 
<title>Parallax Scrolling Tutorial</title> 
<!-- CSS Code --> 
<link rel="stylesheet" href="style.css"> 
<!-- JS Code --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="script.js"></script> 
</head> 
<body> 
<!-- Section #1 --> 
<section id="home" data-speed="10" data-type="background"> 
<article></article> 
</section> 
<div id="box"></div> 
</body> 
</html>

CSS代碼

body{ 
margin:0; 
padding:0; 
} 
#home { 
background: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg) 50% 0 no-repeat fixed; 
height: 1000px; 
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative; 
} 
#box { 
height: 1000px; 
width: auto; 
background-color: blue; 
}

JS代碼

$(document).ready(function(){ 
// Cache the Window object 
$window = $(window); 

$('section[data-type="background"]').each(function(){ 
var $bgobj = $(this); // assigning the object 

    $(window).scroll(function() { 

    // Scroll the background at var speed 
    // the yPos is a negative value because we're scrolling it UP!        
    var yPos = -($window.scrollTop()/$bgobj.data('speed')); 

    // Put together our final background position 
    var coords = '50% '+ yPos + 'px'; 

    // Move the background 
    $bgobj.css({ backgroundPosition: coords }); 

}); // window scroll Ends 
}); 
});

來源

2016-04-06 user3619057

你想要圖像100％的寬度？ – ketan

你的CSS home類應該像日是

#home { 
    background: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg) no-repeat center 0 fixed; 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    height: 1000px; 
    margin: 0 auto; 
    width: 100%; 
    max-width: auto; 
    position: relative; 
}

來源

2016-04-06 10:58:27

無法更改使用視差滾動的圖像寬度

回答

相關問題