Background Images in Nested Divs

faile486

08-08-2011, 10:01 PM

I'm trying to adapt a technique I saw on matthewjamestaylor 's website to a design for my site that involves overlapping divs with background images. I can't get one of them to show up, and I'm not sure why?

I'm using nested divs to get equal column heights. I need different background images on a number of elements.

Here's the overall structure (not accurate code, just a general idea!):

<body> - has an image background that repeats.
<wrapper> - has an image background that repeats.
<header>
<navbar> - has a background image that doesn't repeat.
</navbar>

<banner>
</banner>
</header>

<colmask>
<colright>
<content>
<main> - has a background image that doesn't repeat.
</main>

<sidebar> - has a background image that doesn't repeat.
</sidebar>
</content>
</colright>
</colmask>

<footer> - has a background image that doesn't repeat.
</footer>

</wrapper>

</body>

I also need a background image on either colmask, colright, or content as well, and it's not showing up! I can't figure out why. It's a border image that should show up between the sidebar background and the main content background. Any idea why it's not expanding to fill it?

You can view the live site at http://www.elenmir.com/themes/elenmir/default.html (Yes, I know it looks like crap!)

Thanks

resdog

08-09-2011, 03:58 PM

I think your issue is that you have your internal divs set to float, which means the outer container div's do not have a determined width/height. One fix would be to give the parent divs (colmask, colright and content) a style of overflow: hidden. That will allow the containers to be given a width and height and the background images will show up.

Avril

08-09-2011, 04:13 PM

Hi!

Just took a quick look at your source code: your image urls need not be repeated and some are not in quotes. Try using background-image: url ("img/theimage.png"); background-repeat: no-repeat; (or repeat, as the case may be). Just off the cuff...

faile486

08-09-2011, 04:23 PM

Resdog: Thanks a TON! It finally works = )

Avril: Thanks for looking! I know they didn't need to be repeated like that, I was just trying to figure out if one of them would work when the others didn't, and wanted everyone to be able to see that switching which div the image was on wouldn't matter.

Yeah, I haven't been cleaning up my quotes because I've been so frustrated by the image not showing up. Going to do that in the final version though = ) I'll post it here when it's done.