Essential Grid in section with background image -broken on internet explorer

[dannikb]

Hi, I have a section with an image in the Background Lower Layer. That section contains a single row with one column. And in that column is an Essential Grid shortcode. On Chrome, this looks great, and the background image fills the entire section behind the Grid. However, in Internet Explorer, the background image’s height does not fill the entire section. My guess is that’s because the height “grows” when the Grid is rendered, which happens after the background image is displayed. But then again … it works well in Chrome.

I have the background image set to Repeat = “none” cover, center.

I’ve tried all kinds of tricks that I found in the forums but nothing seems to work.

[nabeel]

Hi @dannikb,

Thank you for reaching out to To fix the background issue in IE, please add the following code in the Theme Options > CSS:

[class^='x-bg'] {
    height: 100% !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[dannikb]

That did the trick! Thank you very much!

[matt]

You’re most welcome, Dannette!