No Background Scroll on Mobile devices

  • Posted in : impressivCard
  • Mike Woodhouse
    Participant
    8 January 2013 at 20:54
    #2925

    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
    Keymaster
    8 January 2013 at 21:26
    #2927

    Hi, you can try the custom css code below;

    body { background-attachment:fixed; }
    Mike Woodhouse
    Participant
    8 January 2013 at 21:41
    #2929

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

    best,

    Mike.

    ahmetsali
    Keymaster
    8 January 2013 at 21:48
    #2930

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

    Mike Woodhouse
    Participant
    8 January 2013 at 21:56
    #2932

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

    ahmetsali
    Keymaster
    8 January 2013 at 22:15
    #2934

    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
    Participant
    8 January 2013 at 22:43
    #2935

    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
    Keymaster
    10 January 2013 at 20:08
    #2964

    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
    Participant
    11 January 2013 at 17:46
    #2988

    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
    Keymaster
    11 January 2013 at 17:56
    #2990

    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.

Viewing 10 posts - 1 through 10 (of 10 total)

The forum ‘impressivCard’ is closed to new topics and replies.