[Mike Woodhouse]

HI, How can I set it so the background doesn’t scroll? I have a custom image with an overlay and I would like to set the image to not scroll when on IPhones/Android devices.

Best,

Mike.

[ahmetsali]

Hi, you can try the custom css code below;

body { background-attachment:fixed; }

[Mike Woodhouse]

Hummm, Is this to go at the top of the main.css? Tried that and no joy

best,

Mike.

[ahmetsali]

Try to put it at the bottom, if it doesn’t work, if you provide a link i can check whats wrong.

[Mike Woodhouse]

Just tried it at the bottom and still no joy. See if you can see whats wrong? – http://www.mikewoodhouse.com

[ahmetsali]

Hi, i just tested your site on iphone4/5, it looks fine, background is fixed. One small tip : you may reduce your bg image to max 1920px with to increase mobile performace.

[Mike Woodhouse]

It’s weird, in Live mode on Dreamweaver it is fixed in place as it is on an android phone but I can’t get it to work with my 4s…

[ahmetsali]

Hi, it looks like css background-attachment: fixed property is not supported on some mobile devices. You can use this css code, that should work.

body:before { background: url('images/bckg/office.jpg'); content: ""; position:fixed; z-index:-1; width:100%; height:100%; top:0; bottom:0; left:0; right:0; background-size:cover; background-attachment:fixed; background-repeat: no-repeat; }

[Mike Woodhouse]

Unfortunately no joy with that code and from having a look on the net, I can’t seam to find ANY code that should resolve this.

[ahmetsali]

Yes, it looks like mobile browsers are not good with fixed elements/backgrounds. However the last css code i provided, i tested on android 4+, and iphone 4-5, it was working fine.