I cannot get an inset box shadow to appear

Support
#1

there is a section that you will see that has a tea cup and some tablets here:

I am using a piece of CSS you gave me to pin the background, which works great and looks like this:

.fixed-bg .x-bg .x-bg-layer-lower-image {
background-attachment: fixed !important;
}

I want to put a drop shadow inside this section on the top and bottom (not on the sides) and no matter what I do, I can’t seem to get it to work. I have tried adding CSS I’ve seen in other posts in the inline area in customization on the section, and I’ve tried creating CSS in the customizer but I’m not sure how to add 2 classes in the customize area of a section. When I use the drop shadow option in the section it doesn’t do anything either.

#2

Hello Lance,

Thanks for writing in!

Do you want something like this?

Well in that case, please make use of this code instead:

.x-section.fixed-bg .x-bg-layer-lower-image{
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

Feel free to adjust the shadow blur and the color.

#3

What do I put in the element class?

#4

Hello Lance,

Please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-section.fixed-bg .x-bg-layer-lower-image{
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

Hope this helps.

#5

Awesome! You’re the best! Question - sometimes I’m going to want to do a fixed background section that doesn’t have the box shadow, do I need CSS that addresses one vs the other?

#6

Hello Lance,

In that case, please add a custom fixed-bg and has-shadow classes in your section and then you can use this css code:

.x-section.fixed-bg .x-bg-layer-lower-image{
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

.x-section.has-shadow .x-bg-layer-lower-image{
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

If you only want to have fixed background, then only use fixed-bg as the custom class of the section. If you want both, then add those two custom classes.

Hope this make sense.

#7

Awesome! Thank you…

#8

You are most welcome!

#9

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