Background image and color - css

[mat4020]

Hello everyone,

I need a bit of help! I've been search all over for an answer to this question and I cant seem to find it. I'm fairly sure it's something easy and I've just got something little messed up.

What I'm trying to do:
- have a background image that is the correct width of my div
- have a background color fill in the area under the background image if the content is longer than the bg image
- have the div a minimum of the height of the bg image (600px)

Right now the bg color doesn't fill in below the bg image.

The xhtml - http://www.duvalschools.org/merrillroad/new/Merrill/
The css - http://www.duvalschools.org/merrillroad/new/Merrill/default.css

Look at #text

I hope this makes sense. If it doesn't just ask and I'll try to clarify.

Thanks,
Matt

 

[angelwatt]

background-image cannot have its width adjusted with CSS. The image would need to be sized ahead of time. You could however put the img inside a div and place it underneath the content using z-index. Then you'd be able to adjust width and height of the img and the div around it.

As part of a solution. If you move the footer div inside the content dive the background color (if applied to content) will extend to the bottom of the page, which is what I believe you want. The background image still shows up too doing this.

 

[mat4020]

I knew it was going to be something really easy. Thank angelwatt that work great!

background-image cannot have its width adjusted with CSS. The image would need to be sized ahead of time. You could however put the img inside a div and place it underneath the content using z-index. Then you'd be able to adjust width and height of the img and the div around it.

As part of a solution. If you move the footer div inside the content dive the background color (if applied to content) will extend to the bottom of the page, which is what I believe you want. The background image still shows up too doing this.