CODEWITHSUNDEEP
htmlcssbackground
abc123
abc123

Reputation: 8303

How to implement multi piece page background that is behind a content background in HTML/CSS without Javascript?

I'm having trouble implementing this design I was given into HTML/CSS. Here is the .psd: http://www.sendspace.com/file/10wuld

Here is the code so far: http://jsfiddle.net/wezW4/

Here are some visual notes: http://screencast.com/t/FMq6JK5weI

I got stuck now where I used position:relative for #content-background, it leaves a big empty space after I position it. A friend suggested approaching it differently with absolute positioning on the page background elements, but didn't make as much progress.

How can this be done with my current approach? Or if my approach is wrong, what is the correct approach?

Upvotes: 0

Views: 100

Answers (1)

learningtech
learningtech

Reputation: 33705

Just do something like this:

<html>
          <head>
                     <style>
                            #a, #b, #c {background-repeat:repeat-x;}
                            #a {background-image:url(http://dev.enhancetrade.com/prodetails/images/slider-background-5x5.jpg); background-position:center top;}
                            #c {background:white; width: 400px; margin: 0px auto;}
                            #b {background-image:url(http://dev.enhancetrade.com/prodetails/images/slider-background-5x5.jpg); background-position:center bottom;}
                     </style>
          </head>
          <body>
                     <div id="a">
                     <div id="b">
                     <div id="c">
                                adslfijaoifje
                                adslfijaoifje
                                <p>asdjfoiajoiafeoi</p>
                                <p>asdjfoiajoiafeoi</p>
                                <p>asdjfoiajoiafeoi</p>
                                <p>asdjfoiajoiafeoi</p>
                                <p>asdjfoiajoiafeoi</p>
                                <p>asdjfoiajoiafeoi</p>
                                <p>asdjfoiajoiafeoi</p>
                                <p>asdjfoiajoiafeoi</p>
                     </div>
                     </div>
                     </div>
          </body>
</html>

Upvotes: 1

Related Questions