Is it possible to enlarge the background image size on a mobile device?

[core365]

Hi, I’m working on a site and I’m using background images so I can use the parallax effect and they’re spot on for how I want them to look on a desktop, but when I view it on a mobile, the image is way too small. I’ve tried to add some CSS to it myself, using the ‘Customize’ Class for the section, but it’s not working! Would you mind taking a look for me please and let me know what I’m doing wrong!

Here’s the CSS:

   @media (min-width: 0px) and (max-width: 500px) {
    .responsive-image-size {
      background-size: 250% !important;
    }

The section/background image I’ve used it on is under the section with the large title ‘Branding Agency.’ Here’s a screen grab of the pic for your reference:

I’ll put the URL in a secure note as it’s on a temp link.

Thanks!

[ruenel]

Hello @core365,

Thanks for writing in!

Your code does not work because it is not pointing the correct element class. Please have it updated and use this:

@media (min-width: 0px) and (max-width: 500px) {
    .responsive-image-size .x-bg .x-bg-layer-lower-image {
      background-size: 250% !important;
    }
}

Just to manage your expectations, this isn’t specifically a theme issue, but rather, your customisation of it. So whilst I have happily provided you with some guidance above on how to get it working, we cannot provide theme customisation as a general rule, or support custom code solutions provided. Therefore, you might find it helpful to check out the following:

CSS Selector Reference
How to find the css selector in chrome

Best Regards.

[core365]

Hi @RueNel,

Excellent, that’s sorted it, thank you!

Ah, I totally missed having to include the specific class - I did try the .x-bg with and without it, but it didn’t do anything, and now I know why, because it needed the .x-bg-layer-lower-image class too, doh!

Thank you, your time and help is much appreciated!

[lely]

You’re always welcome!

Glad @RueNel was able to help you here. Cheers!