Background image in IE9 is not working properly

css internet-explorer-9 background-image

11,290

Several comments have pointed out that it could be compatibility mode. It could also be Quirks mode. This seems to be a very likely reason, as the CSS you've quoted should be perfectly fine in IE9.

To check the browser's mode, press F12 to bring up the dev tools window. The mode should be shown in the top right of this window. It should be fairly clear if it's in an IE7 or IE8 mode or quirks mode. Anything other than IE9 Standards will be a problem for you.

So now the question is how to avoid the browser using the wrong mode.

There are a few reason why it could pick the wrong mode.

Quirks Mode - this is an IE5-compatibility mode. It will make your page look really badly wrong. The most common reason for IE9 going to quirks mode is if you forget to include a <!DOCTYPE> declaration at the top of your page, or if it's there but invalid.

Fix this by making sure that the very first line of your HTML code is as follows:
```
<!DOCTYPE html>
```
IE7/8 Compatibility modes - IE9 will sometimes fall into compatibility mode if it thinks the page has errors that imply that it should use them or if the user has configured the browser to do so. You should run your HTML code through the W3C Validator and correct any errors it picks up; this may help.

You can also attempt to force IE to use its best available rendering mode by including a meta tag as follows:
```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```

Put this in your HTML's <head> section. This will tell IE to avoid using compatibility mode where possible.

Hope that helps.

11,290

Author by

Denesh Kumar M

Updated on June 04, 2022

Comments

Denesh Kumar M almost 2 years

I created a text box with background image. That code works properly in firefox but it is very bad and unaligned in IE9. This is the code which I created:

<input type="text"class="tbox" />

.tbox
{
    height:40px;
    width:290px;
    padding-left:5px;
    padding-right:46px;
    background:url(user-image2.jpg) no-repeat right;
    background-size:40px 35px;
    border:2px solid rgba(128,255,0,1);
    position:relative;
}

Can anyone help me on how to code which is suitable for all type of browsers..