background images for individual page sections

Discussion in 'Web Design and Development' started by phadam, Sep 27, 2011.

  1. phadam macrumors regular

    Joined:
    Jan 21, 2009
    #1
    I was trying a single page layout and would like to have a different background image for each individual page section. I'm sure that I am missing something fairly easy or doing something wrong, I just can't put my finger on it. Right now I have my body background set to #000 and my #wrapper width set to 930px. If my class id's are set up as section1, section2, section3, etc. and under my #wrapper can I still have full width of the background image to fill screen? Right now, my images are obviously at 930px wide. Just not sure how I would set this up.. Any help is appreciated. Thanks!
     
  2. jsm4182 macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #2
    A background image cannot be larger than the elements its contained in.

    A solution for your problem would be to have each section 100% width of the browser(remove #wrapper) then put a div like #wrapper with that 930px width inside each section.

    something like
    Code:
    <html>
    <head>
    <style type="text/css">
    .wrapper { width: 930px; margin: auto; }
    </style>
    </head>
    <body>
    <div id="section1">
         <div class="wrapper"></div>
    </div>
    <div id="section2">
         <div class="wrapper"></div>
    </div>
    <div id="section3">
         <div class="wrapper"></div>
    </div>
    </body>
    </html>
    
     
  3. phadam thread starter macrumors regular

    Joined:
    Jan 21, 2009
    #3
    Aahh it worked! Thank You. Appreciate the help :D
     

Share This Page