Top and bottom gradient using CSS

Question

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>

https://i.sstatic.net/V4b7D.jpg

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

Answer 1

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:

Answer 2

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.