X Pro - Target the section bg image size with CSS

Support
#1

Hi, I’m trying to modify/override the sizes of the background image when viewing on mobile, or at certain breakpoints. This is the section background (when the advanced tab is selected) that gives you a lower layer and upper layer. I want to target the lower layer with @media-screen but whatever I try seems to be overridden by the settings in the sidebar.

For instance I have the background size set to calc(100% / 1.7), when viewed on mobile I’d like to alter that so I thought something like this would work (but it doesn’t):

@media screen and (min-width: 980px) {
.x-bg {
background-size: 30%!important;
}
}

#2

Hello @dmuller,

Thanks for asking. :slight_smile:

If you specifically want to target mobile devices then you need to change the viewport size. For more information, please take a look at following resource.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thanks.

#3

I understand that. I want to target, specifically, the background image. So, what I’m after is the CSS class names or IDs to do that, everything I try so far doesn’t works and I can’t seem to find the right class using Developer Tools.

Thanks.

#4

Hi there,

Please check the screenshot below:

You can see that the section’s background images are placed in the divs with the classes x-bg-layer-lower-image and x-bg-layer-upper-image.

Depending where you set the background, you can make use of the respective class.

For more information about how to use the Dev Tools, please check this link

Hope this helps.

#5

Brilliant, perfect, couldn’t be clearer, still don’t know how you managed to find that class as I did look (I thought). Thank you!

#6

You’re welcome, you can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.