Background image not fixed on Ipad

[teamkm 0]

Using the touchscreen on the Ipad2, my background image moves when scrolling down, which does not happen on a Droid or PC, and truncates the image bottom past the edge of the initial browser window. I have "fixed" enabled on the background image and messed with all the possible combinations in color control and layout editor. Any thoughts on what's going on? I have the latest Pagelines 2.3 and 3.4.2 Wordpress installed.

Thanks in advance.

[Danny+ 1,327]

Hi,

Can you provide a link to your site so we can see this issue in action please.

[maggiejohilliard 0]

I'm having the same issue. Made content boxes to run vertically down the left sidebar ad on ipad they run @ bottom below page content. My site is at www.maggiejo.com - if you can view on ipad it'd be helpful to see what i'm dealing with.

[Rob 547]

We provide this plugin allowing visitors to implement code for specific browsers: http://pagelines.com/store/plugins/browser-css

I am not sure which system iPad2 uses since I don't have one. However, when you identify that and apply some CSS, these might help:

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment

and

http://www.w3schools.com/css/css_background.asp

[teamkm 0]

You can find my website Here. It only appears to happen on my home page, and as maggie pointed out, the sidebar is placed below the content on other pages as well.

[teamkm 0]

So I've tried:

.ipad {

background-image:url('smiley.jpg');

background-repeat:no-repeat;

background-attachment:fixed;

}

.ipad body {

background-image:url('smiley.jpg');

background-repeat:no-repeat;

background-attachment:fixed;

}

and countless other combinations with no luck. How exactly do we use the browser specific css plugin and target the specific browsers and devices? I've searched forums and the internet for hours and found only very vague descriptions and referrals to other very vague websites, which are also very few. Are we supposed to edit the css in the "Edit" plugins option, highlight "Browser specific CSS" and type the code in there? Seems anything I try (above) has no effect with ipad (.ipad) or Internet explorer (.ie). Any help would be appreciated!

[Rob 547]

Try it with a more specific URL for the image. Not just smiley.jpg but

http://www.yoursite.com/wp-content/uploads/2012/9/smiley.jpg

or something like that. The media library will give you the URL for the uploaded image. Just copy and paste.

Likely your browser doesn't know where the smiley.jpg is located unless it's in the root.