[ninestepstowaterParticipant]

Hey guys. Thanks for your help so far.

Two things I need help with now.

When I open my site on a desktop or laptop, the background image does not scroll on the longer pages. But when I open the site on a tablet or phone, the background image sort of “jumps” when you scroll down or up at all.

How can I get the image to stay still no matter what device it’s open on?

And also, how can I make the navbar remain stationary at the top of the page while everything else scrolls?

Here is the website:

http://www.ninestepstowater.com

[RahulModerator]

Hi there,

Thanks for writing in! You can set CSS rules via Customizer, Custom > CSS section using the menu Appearance -> Customize.

body {
    background-image:url("http://www.path.to/background/image.png");
    background-repeat:no-repeat;
    background-attachment:fixed;
}

Hope that helps.

[ninestepstowaterParticipant]

No it didn’t work. I think part of the problem is that the image needs to be stretched to fit the space, maybe? There is empty grey space beneath the picture when it scrolls.

[Rue NelModerator]

Hello There,

Thank you for the clarifications. What you have been experiencing has been asked many times. This issue is not with X or even WordPress. This is how the page is treated in you mobile phone’s browser. have you noticed that when you load the page, you see the address bar. As soon as you scroll the page, the address bar disappears. This is what caused the image to be like jumping around as you scroll the page back and forth. For related issue, please check this: http://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome

Hope this explains it briefly.

[ninestepstowaterParticipant]

Well, okay then. Thank you for showing me that. I guess it’s not the biggest problem on the site, and I can just deal with it later. Thanks, you’re always most helpful!

[LelyModerator]

You’re always welcome!

Cheers.

[Author]

Posts