[Ron]

Hello,
I have been using the Rock Star Pro theme. When setting my custom background I uncheck the “Scroll with Page” which works fine on all desktop browsers, but on my mobile browsers the image scrolls with page. I need the background image to stay static to create the same effect as the desktop browser do for consistency. This feature shows to work when in the editing mode for this theme. Please help.

[Pratik]

Hi @Ron,

Can you post in your site url.

Regards,
Pratik

[Ron]

Hi Pratik,
http://www.infocusphotographs.com

Thank you.

[Pratik]

Hi @Ron,

I checked the site on the phone and desktop and in both cases the bg image is fixed? Am I missing something?

Regards,
Pratik

[Ron]

Yes the background should be fixed, but I don’t want the background to scroll with the page. On the desktop the background stays fixed but the remaining text and images on the page move over the fixed background to give a 3D look (Parallax?). On the mobile device it does not. The background on the mobile device moves or scrolls with the page. I want the look and feel of the desktop website to be the same on the mobile device.

[Mahesh]

@ronmaf: Go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS.

body.custom-background {
    background: url('http://www.infocusphotographs.com/wp-content/uploads/2017/02/sophie-sollmann-100865.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Let me know if any problem.

Regards,
Mahesh

[Ron]

Hi Mahesh,
That did not fix the issue. Please let me know if there is another fix.
Thank you.

[Mahesh]

@ronmaf: The issue seems to persist only on iphone, checking on other devices works fine. Here is a workaround for the iphone I found so far. So hope this will fix your issue.

body.custom-background:before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: url('http://www.infocusphotographs.com/wp-content/uploads/2017/02/sophie-sollmann-100865.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Regards,
Mahesh

[Ron]

Great job Mahesh! it works! Thank you.

[Mahesh]

@ronmaf: Thank you for your appreciation. Have a nice day!

Regards,
Mahesh

[Author]

Posts