Possible to use media queries on a parallax image?

Hi folks,

I’ve been using the parallax component and can see how it’s set up in the UI, including specificying the image…
parallax-ui

…but I haven’t found the actual CSS. Or is it done via JS?

I was hoping to change the image based on screen size. Is this possible, presumably within a media query?

Thanks for any help. :slight_smile:

As of Bootstrap 5, the Parallax background component uses a combination of JavaScript and inline CSS to display and style the background image. If you click on your Parallax Background component, you can see the inline CSS in the attributes panel.

To me, the simplest (though perhaps not the most efficient) way to have different images at different screen sizes would be to add multiple Parallax Background components in the same place, each with a different image, and then use the responsive display settings to show and hide the Parallax Backgrounds as required.

Thank you. I’ll have a look at the options. I see the CSS now. I think I was clicking on the wrong element earlier, doh.