I am using the cover property to create a background image that fills the background and resizes with the browser. But I run into one issue, the page has a lot of content and no scroll bars appear for me to scroll down! Here is the code I am using:

I didn't say remove position:fixed, I said remove fixed from your background rule. Also, it would be helpful if you showed the rest of your code and/or a jsFiddle. BTW why does your body have a z-index?
–
j08691Sep 19 '12 at 3:33

@j08691 - My apologies, I misread. I will work on a fiddle, as for the z-index, I original had tried this as a div that wrapped the entire page but changed it to the body and the z-index was left over and I forgot to remove it. (The div had the same issue as above.)
–
LyndaSep 19 '12 at 3:45

@j08691 - Here is a fiddle - You will see a black bar come over the image. I want to avoid that.
–
LyndaSep 19 '12 at 4:03

I found my background was showing over the image so I added this class to the body:

.transparent{
background-color: transparent !important;
}

One other issue that arose was my background was black, with a transparent background-color white shows before the image is loaded. To get around this issue I created a loading div and had the page load then add the class to the body.