Alter background of content area modal

[riugn557]

Hi there,

I have a content area modal in my header (https://thelanguagesherpa.com) - when you click on the words ‘subscribe here’ it appears.

Do you know how I can add a background image to the content area?

Thank you!
LS

[nabeel]

Hi there,

Thanks for writing in! To add a background image to a modal, try adding the following code in the Theme Options > CSS:

.home .e21-3 .x-modal-content {
    background: url(https://thelanguagesherpa.com/wp-content/uploads/2018/04/Mountain-Sherpa-Illustration.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

Change the background image URL in the above code as per your need.

Cheers!

[riugn557]

Hi Nabeel,

That works, but it is only changing the background image for the modal content on the home page. Do you know how I can make it so that this change affects the content modal no matter what page it is on?

Thank you,
LS

[Prasant]

Hello @riugn557,

Thanks for updating thread.

To make the changes sitewide, please update the code with following under Pro > Theme Options > CSS:

.x-modal-content {
    background: url(https://thelanguagesherpa.com/wp-content/uploads/2018/04/Mountain-Sherpa-Illustration.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

Let us know how it goes. Have a nice weekend.

Thanks.

[riugn557]

Thank you, Prasant!

[basanta]

You are most welcome!

[riugn557]

Hi Basanta,

Just one more thing on this topic:

I now have another content area modal - you can see it in the blue header bar. Can I have it so that the new background image that I have in the original content area model does not appear in the new one?

Thank you!
LS

[nabeel]

Hi again,

Please give your new content modal element a unique class e.g no-bg and then add the following code in the Theme Options > CSS:

.no-bg {
    background-image: none !important;
}

Let us know how this goes!

[riugn557]

Hi Nabeel,

Unfortunately it didn’t work.

LS

[friech]

Hi There,

Please move the code given from Theme Options > CSS to Element CSS under the customize tab.

And update the given code to this:

$el .x-modal-content {
    background: url(https://thelanguagesherpa.com/wp-content/uploads/2018/04/Mountain-Sherpa-Illustration.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

Do I need to put this on each Content Area Modal element?
Yes, because you need a different background-image for each Content Area Modal element, right?

Hope it helps,
Cheers!

[riugn557]

Hi Friech,

That’s great, thank you!

[christian]

You’re welcome.