Adding background image to modal, but seeing the website in the background of the side content

[nicolaticola]

Hi,

I’ve added a background image to a side bar content modal. When it’s clicked on the background image covers the website in the background of the side bar pop up. I’m using the following css:

.sc-modal {
	background-image: url(https://redfernrehab.com.au/wp-content/uploads/2020/11/AdobeStock_303558300_Preview.jpeg);
	background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

Could you help us with seeing the website in the background when the side bar content is visible? The page is https://redfernrehab.com.au/what-we-offer/

Thanks.

[ruenel]

Hello @nicolaticola,

Thanks for writing in!

Do you mean to display the background like this?

You will have to add the background image into the modal content container and not on the whole modal container which is what you are doing. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Therefore, the final code should be:

.sc-modal .x-off-canvas-content {
    background-image: url(https://redfernrehab.com.au/wp-content/uploads/2020/11/AdobeStock_303558300_Preview.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

Kindly update your code and check the resulting layout.

[nicolaticola]

Thanks for the reply.

Sorry, I didn’t explain it very well.

I mean:

But this image back to being the website in the background:

Apologies for not making it clearer!

[ruenel]

Hi @nicolaticola,

You mean like this?

Kindly have your code updated and use this:

.x-anchor-toggle.sc-modal {
	background-image: url(https://redfernrehab.com.au/wp-content/uploads/2020/11/AdobeStock_303558300_Preview.jpeg);
	background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

Your background image will only be applied to the toggle button. Kindly let us know how it goes.

[nicolaticola]

That worked. Thank you.

[marc_a]

Hi @nicolaticola,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.