Archived topic

Set off panel background image colour

1 reply · Started by Brian on August 12, 2021

Viewing posts 1–2 of 2

August 12, 2021 at 6:32 am #1893280

Hi I am using this code to set a background image on the off panel menu

#generate-slideout-menu {
background-image: url(imagelink);
background-size: cover;
background-repeat: no-repeat;

It works ok but what I am trying to do is set opacity on the image so the colour background shows through.

When I add opacity to the above css it adds it to the entire off panel page and the homepage shows through.

I imagine this is a simple fix for you CSS wizards :-)

Thanks

August 12, 2021 at 7:10 am #1893332

Hi there,

thats right Opacity will apply to the Element, not the background image that is painted onto the element.

Try this instead:

#generate-slideout-menu:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(your_image_url);
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0.25;
}

This archived topic is closed to new replies.

Start building better websites today.