Background image in empty div

[rudynorman]

I have a #page-wrap, and inside that I have #main-content which contains two other divs called #guts and #navigation. I want #main-content to have a background image, and to be the same length as whatever is the longest div inside (likely to be ‘#guts’).

However, I have no idea how to achieve this. Help?

[chrisburton]

Set the background to repeat on #main-content.

[designer_shiv]

set the background to repeat-y in #main-content

[rudynorman]

It already is set to repeat. Here’s the CSS

#page-wrap { position: relative; width: 1280px; min-height: 1000px; height: auto; background-image: url(images/main.png); background-repeat: no-repeat; margin-left: auto; margin-right: auto; z-index: 1; }



#main-content { position: relative; width:797px; height: auto; padding-bottom: 50px; background-image: url(images/content-back.png); margin-left: auto; margin-right: auto; background-repeat:repeat-y; z-index: 0; margin-top: -550px; }



#guts { position: absolute; width:480px; height: auto; margin-left: 115px; margin-right: auto; z-index: 3; margin-top: 760px; color: white; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12pt; }



#navigation { position: absolute; width: 230px; height: auto; margin-top: 590px; text-align: right; z-index: 100; margin-left: 600px; }

[chrisburton]

Wtf. Why do you have a negative margin of 550px?

Anyway, can I see a live link?

[rudynorman]

Here’s the link

[thomas]

It’s a little unclear what you’re asking for. Do you want the background to “stretch” according to the width of the div? If so, you can use the “background-size” property (not supported by older browsers, though).

If you want the background to repeat, then you should be already set.

[TheDoc]

I’m going to guess it’s because either it only contains floated or absolutely positioned elements.

[Author]

Posts