Forums

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.

treehouse : what would you like to learn today?

Forums

Background image in empty div