javascript - issue with parallax scrolling background images -

javascript - issue with parallax scrolling background images -

for part working alright. issue 1 of parallax scrolling background images (of water tower near bottom of site) shows grayness line @ bottom of image when image near bottom of browser window in both firefox , chrome. don't have issue in safari when info speed set 55 or higher. gets improve in ff & chrome when set info speed much, much higher although never goes away entirely. i've left @ 300 now, although there no changes between 300-1000.

here link site:

http://west3rner.com/birds/index.html

here html, css, javascript code:

https://jsfiddle.net/aprilirene/qtwj4vh0/

html:

<section class="intro8 section" id="section8" data-speed="300" data-type="background"> <div class="overlay2"></div> </section>

css:

.intro8 { height:50%; width:100%; background:url(../images/fullscreen05.jpg) no-repeat center top fixed; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; display:block; background-attachment:fixed; margin-bottom:0px; transition: .15s ease-in-out; -webkit-transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; -o-transition: .15s ease-in-out; transition-property: background-position; -webkit-transition-property: background-position; -moz-transition-property: background-position; -o-transition-property: background-position; }

js:

$(document).ready(function(){ $window = $(window); $('section[data-type="background"]').each(function(){ var $bgobj = $(this); $(window).scroll(function() { var ypos = -($window.scrolltop() / $bgobj.data('speed')); var coords = '50% '+ ypos + 'px'; $bgobj.css({ backgroundposition: coords }); }); }); });

i appreciate help this!

thanks,

april

javascript html css scroll parallax