[Support request] Background image on Smartphone

[Uwe]

Hi Generatepress Team,
I need help to resolve a problem.
My problem is that the background image on the smartphone is not correct shown.
On PC is everything fine and if I make the window smaller the background image moves correctly.
Please have a look on my page https://wandern-mit-uwe.de on PC and smartphone, than you see that the background is just blue from the sky of my background image.
My configuration is: No repeat, covered, fixed, top left.
Thank you in advance for your help.

[David]

Hi there,

Fixed backgrounds do not work on ( most ) mobile devices. So the background image scrolls with the content. The mobile device ignores it as fixed backgrounds can use a lot of processing power which eats up the battery. The only fix to this is using Javascript but that can produce a ‘laggy’ experience for the user.

[Uwe]

Hi David,

thanks for the answer. I cannot understand that, because on my old Page with another theme it worked correctly. It worked only with html and css.
In the html after the body tag was this on my old page:
img src=”url…”

In css was this:
img.bg { /* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 1024px) {
img.bg {
left: 50%;
margin-left: -512px; /* 50% */ }
}

I tried now to resolve the problem with a hook, but even this was not working. At first I deleted the background image (body) in the main preferences. Then I made a hook with this … img src=”url…” … in the position “wp_body_open” and made the css in to the extra css. Background image was shown, but the content was away only the video was shown. Maybe it’s a think of the priority? I cannot believe that is not possible. I know it is possible because on my old page it worked even without Javascript.

[David]

So fixed backgrounds won’t work.
Looks like you’re old theme was using position fixed on a HTML Element.
Instead you could try this CSS method:

body {
    position: relative;
}

body:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('full-background-image-url');
    background-size: cover;
    z-index: -1;
}

[Uwe]

Hi David,
many thanks, it works 🙂
5 stars for the support.
Your help is absolutely exemplary!!!

[David]

Thank you – glad to be of help 🙂

[Author]

Posts