javascript - Background image is streched in mobile safri -
i using background image landing page , works fine on desktop browsers, android browser fails on ios browsers... after looking answer thing problem due height of contained div holds background image.
i resized height of container div using jquery 'var wheight = $(window).height();'
i thing length of whole document , gives feeling of image being streached.
i have setup example on fiddle may come right on ios have not tested after adding height using jquery.
what best way handle height issue.
should use screen.height();
or there way around
try in css section
html, body { margin:0; padding:0; } .bg-intro { width:100%; height:100vh; position:absolute; } .bg-intro { width:100%; } .parallax { background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .parallax-1 { background-image: url("http://www.hdwallpapersos.com/wp-content/uploads/2014/07/hd-wallpaper-nature.jpg"); transition: height 0.85s cubic-bezier(0.725, 0, 0, 0.995) 0s; }
Comments
Post a Comment