Background bug in IE6
I came across a pretty frustrating IE6 background bug a while ago and it took me a while to figure out the surprisingly simply solution! Well, technically this isn’t a bug. It’s technically a user-error, but the code (albeit incorrect) works in most modern browsers! Take a look at the following code:
body { background: url('images/bg.jpg')top left #fff no-repeat; }
If you try this code in Safari or Firefox, it will work perfectly. You will see the background image positioned at the top left with no-repeat and with a white background. However, IE6 will render no background! Strange, no? Quite strange. The problem is the lack of a whitespace character between the background url and the position declarations. I became so used to Firefox and Safari’s lax handling of this code that it took me forever to figure out that one little space was causing all of my problems! The following code fixes the problem:
body { background: url('images/bg.jpg') top left #fff no-repeat; }
Hopefully this post will save someone some frustration!
Leave a Comment!