Immobile background on mobile

Hello all,

I would like the background on mobile dooen’t move ! On desktop version the background is immobile. I would like the same on mobile !

you can try with the following link :
http://frantzimages.fr/index.php/kenya/

Anybody has an idea ?
Seb :slight_smile:

Hello Seb,

Please try to use the following CSS code.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard -> Appearance -> Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

@media screen and (max-width: 1024px) {
    #primary #main .panel-row-style {
        background-attachment: fixed !important;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hello Roman,

Thank you for the help but it doesn’t work as you can see on the link :

http://frantzimages.fr/index.php/kenya/

For your information, the background is defined in page builder row !

Seb :slight_smile:

Hello Seb,

Actually, it works for me, the background is fixed in mobile view :slight_smile:

Did you try to clear your cache?

Kind Regards, Roman.

Hello Roman,

Really strange and I cleared the cache of mobile and tried on several phones !

As you can see on the following screenshot, after the background image I get a color background…

Imgur

You don’t have this ? The text and pictures move and the background picture doesn’t move ?

Seb :slight_smile:

Hello Seb,

Yes, I have a fixed picture as the background on full height.

Background doesn’t move on my end, and I don’t get a color background after the background image.

Kind Regards, Roman.

Hello Roman,

The background is not fixed for me ! Maybe it depends the OS of your mobile. I have an iphone with last update. Do you also have an iphone ?

Seb :slight_smile:

Hello Seb,

Nope, unfortunately I don’t have an iPhone to test your site :frowning:

And I see that it is unavailable now.

Kind Regards, Roman.

Hello Roman,

The site is under maintenance but you can access to the page with this link :
http://frantzimages.fr/index.php/test/

Seb :slight_smile:

Okay Seb,

I have an idea :slight_smile:

Currently background is set twice for two divs, let’s try to set it once.

Please try to remove background from both widgets on that page and set it for whole widget area with this CSS code:

#pl-3119 {
    background-image: url("http://frantzimages.fr/wp-content/uploads/2016/02/wall-1074287_1920.jpg") !important;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
}

Please remember about importance of regular backups.

Kind Regards, Roman.

Hello Roman,

I appreciate your attention on this. Unfortunately, it doesnt’t work properly ! The same issue seems to be in this post and the solution doesn’t seem easy : https://athemes.com/forums/topic/fixed-background-emergency/

Not matter ! There is a way to disable the picture backgound for just one row (the second one) on mobile ?

http://frantzimages.fr/index.php/test/

Seb :slight_smile:

Yes Seb,

Please try this:

#pg-3119-1 div {
    background: none !important;
}

Kind Regards, Roman.

Thank you Roman ! but ONLY for mobile device

Seb :slight_smile:

Okay Seb, then please try this:

@media screen and (max-width: 1024px) {
    #pg-3119-1 div {
        background: none !important;
    }
}

Kind Regards, Roman.

It works very good ! Thank you Roman
BUT (sorry), on mobile the background is white and would like to assign a color.

Seb :slight_smile:

… Of course, when I assign a color in the row options, it doesn’t work !

You are welcome Seb :slight_smile:

You can use any color or color code instead of none in the code above.

Kind Regards, Roman.