Background Pic looks great on computers/devices but terrible on mobile devices

I love the way that our background pic looks on computers, desktops and other non-mobile devices. But, the background pic looks terrible on mobile devices!

What can I do? Is there any way to use a CSS code to remove the background pic on mobile devices only?

Hello there,

Is there a link to your site you can share here? Point me where the background appears, so I can get the correct selector.

Regards,
Kharis

The website is: missoularedroom.com

I have the background image in the Appearance - Customize - Background photo section

It appears on every page except the homepage, which is perfect. But if you look at the photo on a mobile device it is very scrunched together and doesn’t look good. I hope we can remove it from mobile devices.

Hello there,

Please try removing this code from your custom CSS:

    @media (max-width: 854px) {
        html body.custom-background {
            background-size: 100% 100%;
        }
    }

To remove image background, use this code:

    @media (max-width: 854px) {
        html body.custom-background {
            background-image: none !important;
        }
    }

Regards,
Kharis

I’m using Moesia free (awesome theme) at sustainfolio.com/testlinksf. I’m having a problem with The Background Image Display under row > Design has the below listed options. No matter which option it is set to, the background image displays parallax. I would appreciate help. Thanks!

Options:

Tiled Image
Cover
Centered, with original size
Fixed
Parallax
Parallax (Original Size)

Hello there,

To disable parallax effect on header image background. use this CSS code:

    .has-banner:after {
      background-attachment: scroll;
    } 

Add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

That works great for disabling parallax from the home page header. I would like to disable parallax from other row background images as well. Is there CSS that can remove parallax for individual row background images? Thanks!

Add a custom class name to the row where the background image is set, for example disable-parallax

See the below screenshot.

49 AM

Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .disable-parallax.disable-parallax {
      background-attachment: scroll !important;
    } 

Regards,
Kharis

That works perfect for rows with background images except except for the first, uppermost row. Example is page https://sustainfolio.com/testlinksf/sustainfolio-mechanics/. The first and fourth rows have as a background image with the Row class set to ‘disable-parallax’. However, only the 4th row has the parallax disabled and the first row is still parallax.

Note: Template for this page (link above) is set to Front Page in order to remove the white space between the logo/menu and the first row as well as between the last row and the footer. Your help is much appreciated :slight_smile:

Hello there,

I didn’t find any parallax row background in that page. Have you removed it?

Regards,
Kharis

the page is there, but the top row with image background was removed and replaced with and Individual header image option. Unfortunately, row background images don’t zoom responsively like the Header image option does. What’s not great about the Individual header image option is that the style is the exact same as the home page header. It would be great if the subpage Individual header image could be styled individually. Is this possible? Thanks!