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!
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
background images for individual page sections
- Thread starter phadam
- Start date
- Sort by reaction score
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
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>