CSS inner-carousel background image not working in IE9

Question

I apologies if the formatting isn't setup properly, I'm quite new to this website.

The image in the CSS below doesn't seem to be loading on the IE9 browsers and I'm unsure of how to go about fixing this issue. I've tried adding filter: none; and am currently using modenizr to add support to all other functions that were broken in IE9.

CSS

.carousel-inner{
   background-image: url("images/unique/hbbanner.png");
    background-repeat: no-repeat;
    background-position: center;
    height:300px;
  }

Yes it does, I've checked Chrome and Firefox and it only fails in IE9. The width is automatically calculated. — user3708761, Jul 02 '14 at 17:38
Bootstrap only works with IE 9.6, that would probably be the reason. — BuddhistBeast, Jul 02 '14 at 17:43
The only thing not showing up is that specific image, the rest of the website is running on bootstrap and functioning just fine. So this one image isn't running properly because of bootstrap? — user3708761, Jul 02 '14 at 17:46
Just a quick question.. How are you rendering IE? In Quirks mode? In something else? A header tag would look like this: `` — BuddhistBeast, Jul 02 '14 at 17:46
Have you checked MDN to ensure everything will work in IE 9? https://developer.mozilla.org/en-US/docs/Web/CSS/background-image — BuddhistBeast, Jul 02 '14 at 17:48
Okay, then are you testing this on the intranet versus the internet? — BuddhistBeast, Jul 02 '14 at 17:49
We may need to see more code. Are you linking your image properly? As in, can you copy and paste that path into a file explorer and see the image from there? — BuddhistBeast, Jul 02 '14 at 17:52
Yes, should I upload it to the FTP and see if it works there? — user3708761, Jul 02 '14 at 17:52
Let's leave that as a last resort, in case it is the picture's path. — BuddhistBeast, Jul 02 '14 at 17:57
Added the code :) Also ignore the data-intervals I was just testing stuff. — user3708761, Jul 02 '14 at 18:05
haha, alright. So that does make sense because IE 9 will render anything in older versions regardless of the meta tag in the header if you are checking your local/intranet. — BuddhistBeast, Jul 02 '14 at 18:07
Thanks so much for your assistance I really appreciate it hahaha, happy its fixed T_T — user3708761, Jul 02 '14 at 18:08

score 0 · Answer 1 · edited May 23 '17 at 12:29

For closure to this question. Twitter Bootstrap is unique already in the sense that it will not render the carousel slide feature in IE 8/9 but IE has its own unfortunate trait to it as well.

IE 9 is configured to show Intranet Sites in compatibility mode, which cannot be altered through an HTML/Meta tag. This causes the issue of not being able to view your photo in the carousel, most likely because the CSS properties you are using are only IE 9 compliant and unsupported in IE 8. More information can be found here.

CSS inner-carousel background image not working in IE9

1 Answers1