Add Upper Background colour to mobile view ONLY

Hi there,

In my header section I have a background image which I’ve setup on Lower Background Layer.
I’d like to however add an Upper background colour over the image but on Mobile view only.
As these settings aren’t able to adjust per screen size like other elements I’m not sure how to achieve this.

Your assistance would be much appreciated.

Hello Leon,

Thanks for writing in! Yes, you are correct. The background options do not have any Responsive Stylings. You will have to resort to another method.
1.) You can use custom CSS. Regretfully this is beyond the scope of our support.
2.) You can create two different versions of your Section. One is for desktop and larger screens and the other will be for smaller screens which has the background image color overlay.
3.) You can insert a DIV element with a z-index slightly behind the other elements. You can add a semi-transparent background color for this DIV element and position this as “Absolute”, and a width and height of 100% so it covers the whole section area.

Hope this helps.

Thank you very much, I’ve used option 3 and it works great.

Hey Leon,

You’re most welcome!

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