Need help with my CSS

Hello again everyone need little help with my CSS code so I figure out how to make cross all browser div transparent background without hurting the text or images on the html but I am having little problem with the position of transparent background on firefox and on Internet explore,everything is fine on chrome browser but I cant get that same result on the other browser I am just little stuck.This just little project I have been working on website base on Metroid.
this one is chrome:

This one is FireFox


This is my CSS code that I am working on

Is there are reason you're not using margin:0 auto; on the .background div instead of position?

http://pastebin.com/d8wzHALt

I noticed a few mistakes, I threw in a bit of free advice and education too, enjoy.



You only need to use margin: auto; 0 is the default for margin-top: auto; and margin-bottom: auto;

True, but 0 auto has been the standard since CSS2, old habits die hard.

Edit: Oh dear, I read your revision.

I'll start from the top. The default position:value would be position:static, not relative and in either case position:relative have nothing in the slightest to do with z-index other than that you might need to use z-index if you position content on top of other content.

1000px is not a standard. 960px is a standard. 768 -> 960 -> 1080 -> 1200 is more or less the standard when making responsive designs. If someone uses 1000px as standard they are bad people and have no eye for aspect ratios.

No designer with self-respect uses hex anymore. Use rgb(); or rgba(); and get with the times.

Other than that your advice was fairly solid.

I wasn't willing to go into detail about the differences between static and relative positioning, I had already written enough as it is. Seeing as he had already had experience with relative positioning I figured he'd be able to better understand what I was getting at in reference to how the object will act. If you take a look at the functions used in accordance to static and relative positioning within the browser rendering engines you'll see they're almost identical in nature.



No eye for aspect ratios? 1000px fits perfectly into the 16:10/8:5 aspect ratio, which was once the predominant wide-screen aspect ratio for computer monitors before 16:9 was introduced to keep uniformity with TV aspect ratios and reduce manufacturing costs. As technology has become cheaper to produce and improved it's limits, we are once again seeing 16:10 retaking it's dominance as the go-to ratio for wide-screen.

Most of my friends who design agree that 960px simply isn't the best width anymore. It looks great on a display device with a 4:3 aspect ratio, but that's about it. Anything above 1024px in a responsive design shouldn't be used for obvious reasons, you're cutting out a huge amount of display devices from proper viewing. We find that 1000px is a sweet spot that looks good on most aspect ratios while keeping to the constraints of most display devices, as a bonus, it fits 16:10 perfectly.

The reality of the situation is that the standard for width is neither 960px or 1000px, it varies from 960 - 1020px. IGN as an example uses 972px, Jacob uses 982px for Fakku, CNN used 1020px for years.



And no programmer with self-respect should ever use anything but Hex even in markup languages. There are vast differences between languages and programs, but uniformity should be kept where it can. If I was using numeric RGB in my CSS code I would have to go through the pain of converting it to hex if I wanted to copy a colour and paste it somewhere else. I'll switch over to numeric RGB when the rest of the world does.

Thank you guys for the help I am still new to CSS and got stuck on that part I didnt see reason why I would not work on croos-browser and had that effect and thank for correcting my code like said still learning the rope of css I will rep you guys for the help.