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

http://fiddle.jshell.net/dtphzdxy/3/

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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -