Repeating backgrounds and IE
There's probably a really good reason for this (actually, wait. We're talking about IE. Nevermind) 
Just wanted to post a reminder to myself should I ever come across this weirdness again. I was working on a layout recently, and everything was working fine in Firefox, and everything was fine in IE except for one little nagging problem. A box that had a repeating background image in it sometimes showed up with the background in IE, and then sometimes not. Sometimes if I refreshed the page – suddenly the background image appeared. The line in my css calling for the background image looked like this:
#mybox {
background: url(images/my_background_tile.jpg) top left repeat-y;
}
Everything looks kosher – at least it SHOULD be. For some reason IE REALLY wanted a background color too! (even though it wouldn't be showing up because the image would be covering over it). Okay. Whatever. So this is what made the background image show up consistently:
#mybox {
background #fff url(images/my_background_tile.jpg) top left repeat-y;
}
IE was happy. And there was much rejoicing.
(*one quick note: this problem was specific to REPEATING background images. Background images set to no-repeat were not having problems)
Oh also – don't ever do this:
#mybox {
background: #fff url(images/my_background_tile.jpg) top repeat-y;
}
All kinds of weirdness happens then. If you're going to specify background coordinate locations (with either "top", "left", "5px", etc.) you have to specify both x and y locations. IE will hate you otherwise. And we don't want THAT! do we?
October 18th, 2008 at 12:48 pm
this is one time where IE did something right. you SHOULD put a background color that closely resembles the background image so that if that image isn't available the box should match up with the rest of your layout. also, if you're going to go through the trouble of positioning a background it makes total sense that you actually GIVE the position that you want the background to be in.
also, you forgot a ":" in your code…
October 18th, 2008 at 3:25 pm
Also, if you just wanted to do the background as an image you COULD use background-image: … background: is for setting ALL of the variables at once…
I know i probably sound like a super nerd, and please don't take this as me talking down to you. It really isn't meant like that EVER when I write. I'm just trying to explain why you're having problems. It is my way of helping the internet.
October 18th, 2008 at 6:22 pm
I guess the thing is that I was under the impression that background color should not need to be set – I don't believe it's required – and if not set – it should be transparent. I'd have to go back to the code I was working with but if I remember correctly, I think I even TRIED to set it to be transparent and it wouldn't work – so if you WANT it to be – you're kinda screwed because IE insists on it being a opaque solid color…
October 18th, 2008 at 7:30 pm
then you do
background: transparent url('path/to/file.png') top left repeat-y;
October 18th, 2008 at 7:33 pm
Again, I'll have to go back and check, but I'm pretty sure IE wasn't happy even with the transparent set as such. I'll keep you posted