THIS ISSUE HAS BEEN SOLVED

I am editing a template for a HTML site. The problem is with a background image. The top half of the background is an image. I am simply changing the image with a different one. It is a .jpg , 1400 x 617. I simply added the image in the images folder and replaced the image name in the style sheet. It displays perfectly in firefox and chrome but in IE it doesn't show. It is all white.

I have uploaded pictures of how it looks in Firefox and IE. In IE I want it to look the same as Firefox.

This is how it looks in Firefox -

This is how it looks in Internet Explorer -

FYI, the previous image was not white. It was blue and I am changing it to red. I created my image in Photoshop.

I tried to find possible solutions through Google and got a couple, none of them works for me. First one was image type. In my case image type was .jpg . New image is also .jpg .

Second option was this code in stylesheet- .blok_header { margin:0; padding:0; background: url(images/redback.jpg) top center repeat-x;} . The advice was to leave a space between ")" and "top center". It has been like that throughout. So nothing to change there.

Third tip I got when someone suggested that I put ("") mark around my url like this- .blok_header { margin:0; padding:0; background: url("images/redback.jpg") top center repeat-x;} . I tried that as well but no luck. Nothing changed.


I have already spent so much time on this that I am getting really frustrated now. If anyone kindly give me some pointers what can possibly be wrong, I would appreciate it a lot.

If I left out any critical information, just ask. I really need to find an answer.

Many thanks for taking a look at my post. Hope you guys can help me out with this.

Thanks

Sak

SOLVED