Marek Zakrzewski Marek Zakrzewski - 5 months ago 26
CSS Question

Background size doesn't work on IE8

I use the following code to position icons in my login fields:

.login-block input#username {
background: #fff url('../gfx/username.png') 20px top no-repeat;
background-size: 16px 80px;
}

.login-block input#username:focus {
background: #fff url('../gfx/username.png') 20px bottom no-repeat;
background-size: 16px 80px;
}

.login-block input#password {
background: #fff url('../gfx/password.png') 20px top no-repeat;
background-size: 16px 80px;
}

.login-block input#password:focus {
background: #fff url('../gfx/password.png') 20px bottom no-repeat;
background-size: 16px 80px;
}


It does work well in all browser but doesn't work well in IE8.

Top makes it go down, and bottom makes it go up so it looks weird. Is there any possibility to make work normally using CSS3 pie ?

Site

Answer

Sadly, the only solution was to set a special rule for IE9 which removes this with white background:

background: #fff\9;
Comments