🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Support request] Background image on Smartphone

Home Forums Support Background image on Smartphone

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1145573
    Frank

    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.

    #1145883
    David
    Staff
    Customer Support

    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.

    #1146547
    Frank

    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.

    #1146717
    David
    Staff
    Customer Support

    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;
    }
    #1147172
    Frank

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

    #1147186
    David
    Staff
    Customer Support

    Thank you – glad to be of help 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.