I'm using a custom HTML module in position "intro" in template gk_creativity. I've assigned a background image (original size: 1400 X 932) from module options, and I'm using a module class suffix 'parallax', the CSS for which I've borrowed partially from the GK_Steakhouse template. The CSS is as follows:
- Code: Select all
.parallax {
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #aeaeae;
overflow: hidden;
position:fixed;
height: 100%;
width: 100%;
z-index: 1;
}
I have tested on multiple resolutions via Quirktools/Screenfly ... everything works as it should... but when tested on iOS (iPad, iPhone) the background image is not shown. However, I have tested the GK_Steakhouse template which I've used on another website, which uses the same scenario( Custom HTML module, background image, parrallax CSS class) and it works even in iPhone/iPad. But I cant locate the problem here
Please help in identifying the problem.
Live Website URL: http://anupamroymusic.com/
Please look at the module position 'intro'
