Sometimes backgrounds will be visible using firefox but not IE7 which makes you wonder…. why?

The reason is pretty simple. CSS needs to be perfect for IE to understand them.

A perfect example would be.

[sourcecode lang=’css’]
body{

background:#fff url(picture.jpg)no-repeat;

}
[/sourcecode]

That piece of CSS will work on Firefox but not on IE7 (funny thing is that it MIGHT work on IE7 but it wont most of the time)

[sourcecode lang=’css’]
body{

Background-image:url(’image.jpg’);
Background-repeat:no-repeat;
Background-color:#fff;

}
[/sourcecode]

This will on the other hand work. As you can see, they have the same content, just a different layout.

You can of course put it in one row but make sure to have the right format, otherwise you’ll still have the same problem.

[sourcecode lang=’css’]
body{

background:#fff url(picture.jpg) no-repeat;

}
[/sourcecode]

As you can see, the only difference is the space between ”.jpg)” and ”no-repeat”

Try this page with both Firefox and IE7 and you’ll see that IE7 won’t show the background, but Firefox will.