Z-index of bkg lower image

[uxmediahouse]

Hi, I have two columns, the first with a bkg lower image. Is there a way for the bkg lower image of column one to go OVER the image in column two once the columns stack at breakpoint 760px? This code is not getting the job done:
@media screen and (max-width: 768px) {
.cayastitle .x-bg-layer-lower-image {opacity:1 !important;z-index:2000 !important;}
.cayastitle .e177-3.x-column, .cayastitle .e177-6.x-column {padding-right:20px;z-index:1000;}
}

maybe i need to build this differently?

This is the page I am working on:
https://cayastudios.com/teachers/

I am giving access in a secure note…

Thank you

[thai]

Hi @coloradodesigngroup,

Please try with this custom CSS instead:

@media screen and (max-width: 768px) {
    .cayastitle .x-bg {
        opacity:1 !important;
        z-index:2000 !important;
     }
    .cayastitle .x-column {
        padding-right:20px;
        z-index:1000;
    }
}

By default, the .x-bg element has z-index: -1. So we should target to this element instead.

Regards!

[uxmediahouse]

That did it…Thanks!

[Prasant]

You are most welcome.