2

I have a background that has a top and bottom gradient and I want it to show on a container layer. The problem is the bottom gradient since it has to appear at the very end of the container div. Any ideas? Here's some example code & imgur photo:

<style>
    .container{background: #fff url(images/bg.png) repeat-x;}
</style>

<div class="container">
    <div id="content">
        <p>Dynamic stuff goes in here that differs on every page</p>
    </div> 
</div>

http://imgur.com/XAaIx

The above code only shows the gradient at the top, but is there another way to achieve this effect?

4

You could try something like:

<style> 
    .container{background: #fff url(images/bg_bottom_gradient.png) repeat-x;} 
    .subcontainer{margin: 0 auto;background-image:url(images/bg_top_gradient.png);background-repeat: repeat-x;}
</style> 

<div class="container">
  <div class="subcontainer">
    <div id="content"> 
        <p>Dynamic stuff goes in here that differs on every page</p> 
    </div> 
  </div> 
</div> 

EDITTED TO ADD NEW STYLE:

  • This would work if the layers were the same width, but the container (the div containing the bg) stretches 100% while the content div is a fixed width (950px). – J Lee Sep 24 '10 at 18:52
  • @fewpeople - Added alternative. – Joel Etherton Sep 24 '10 at 18:56
1

you could use css rules for multiple backgrounds

div.container {
background-image: url(images/bg_top.png), url(images/bg_bottom.png);
background-repeat: repeat-x;
background-position: top left, bottom left;
}

That should work.

  • I'm curious as to which browsers actually support this. – WalterJ89 Sep 27 '10 at 11:46
  • This unfortunately doesn't work too well on IE :( – J Lee Sep 27 '10 at 20:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.