Model background image instead of overlay color

Support
#1

Hi,

Im trying to add a background image that covers the entire screen in stead of using an overlay color. So not the content area but the layer below if that makes sense. I can’t find out how to do it exactly.

BR

#2

Hi there,

To have a complete background you need to click on the clog icon in the Cornerstone and add the link to the background image:

That way the background will be added to the whole page.

Thank you.

#3

No, Im talking about the modals from theme pro, header builders. they dont have this option?

#4

Hello There,

With modal elements, you can only set the overlay background color and the content background color.

There isn’t an option for you to insert a background image. If there is a need to, you can only do it with a custom css. Perhaps, you can use this:

.x-modal .x-modal-content {
    background-image: url(//placehold.it/300x300/eeff00);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

Hope this helps. Please let us know how it goes.

#5

It’s that the content area doesn’t cover the entire screen, I’m gonna give your css code a try right now

#6

This only covers the content part, which I can’t stretch out to cover the entire screen. The border of the overlay containing the close button is still visible…

#7

Hi There,

Please update the given CSS code to this:

.custom-modal-bg.x-modal .x-modal-bg {
	background-image: url(BG IMAGE URL HERE);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
    opacity: 1;
}

Replace the BG IMAGE URL HERE with the actual URL of your image.

And then add a CLASS custom-modal-bg to your Content Area Modal element.

Hope it helps,
Cheers!

#8

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