IE background alignment issues

[CPIT]

Hi, I’m still having issues with alignment of section background images not working correctly in IE.

It seems to work fine in all other browsers when set to ‘cover’ & ‘bottom center’ but I just can’t find a way to get it to align to the bottom on IE. This unfortunately is a massive issue for our business and customers (as most of them use IE sadly!).

I’ve tried on several different machines, platforms and screen sizes (so it’s definitely not a caching issue)

I’ve included a hidden link below to one of the pages that is showing the problem, if you can provide any help (individual page settings or global css fixes - anything that will work would be great!).

Summary

https://cooperparry.com/news/retail-rocks-reinvigorating-the-high-street/

Thanks!

[nabeel]

Hi Mark,

Thank you for reaching out to us. It seems like IE is adding an additional height property to the background images which is causing the issue, try adding the following code in the Theme Options > CSS:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   [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!

[CPIT]

Hi Nabeel - you sir… are a LEGEND

This seems to have done the trick, and saves me manually updating hundreds of pages. I’ll do some more in depth testing, but looks like this has fixed it.

Thanks so much for the quick help, it’s hugely appreciated.

[lely]

You are always welcome!

Cheers.

[CPIT]

Sorry but I’m back

The code above fixed the background issues on most pages in the headers - but has now caused an issue on all the staff profile pages where by the image background is not filling the column like it should do on IE. Disabling the code above fixes the issue, but obviously I need both to work really! I’ve set the image in the columns to cover and bottom, but with the above code it disappears up off the top of the column as per the screenshot below.

It’s just a basic two column view - and I’ve tried forcing the left column to 100% height as well but still won’t work with the above code.

I never realised how much of a headache X is with IE before!

I’ve disabled the above code as we can’t have it breaking other parts of the site like the profiles - do you have any other ideas how we can fix the hear images that won’t affect these pages?

[friech]

Hi Mark,

Please update the given CSS code to this:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .x-section > [class^='x-bg'] {
        height: 100% !important;
   }
}

This will specifically target the background-image inside the section, but not inside the container nor columns.

Cheers!

[CPIT]

Works like a charm! Really appreciate the help thank you!

[CPIT]

Also I’d just like to give a BIG shoutout and thanks to all the support team here at ThemeCo. I’ve bombarded you all with questions over the last few months, and the level of support and help from everyone has been fantastic.

You all rule, thank you again!

[lely]

In behalf of the entire team you’re always welcome!

Cheers.