Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background Images in Nested Divs

    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!):

    Code:
    <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

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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...

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •