Support » Fixing WordPress » Background image is fixed, but moves on mobile??

  • Hello everybody,
    I use the Astra theme, mostly with Elementor.
    I have several background images, handeled in css via different “body”-classes (e.g. body.pagename).
    They are fixed with “background-attachement: fixed” and so they don’t move on scroll.
    This also works in responsive mode on a tablet (Android, Firefox).
    Strangely, on a mobile phone (Android, Firefox) the background images move up and away, when the content is scrolled, and leave blank space.
    Why is that??
    Thanks for any help!
    yours, Tobias

    • This topic was modified 7 months, 1 week ago by  Steve Stern. Reason: moved from developing to fixing
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steve Stern


    Support Team Volunteer

    Please provide a link to a page on your site where we can see this. Thanks.



    Hello everybody,
    sorry for leaving this topic open and unanswered for such al long time…:-(
    By the time, i started it, the website was not yet online, so there was nothing to show.
    But now it is:
    The issue with the background pics on mobile is still the same as described above.
    I am thankful for any suggestions.
    Cheers, Tobias



    There is a way to do it : :

    1- Create a Div, after header div, independent from your content div, and call it “image-hero-area” :
    <div class=”image-hero-area”>

    2. Add the following css in your stylesheet :

    .image-hero-area {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    margin: 0;
    background: url( center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    works fine…

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