: Top and bottom gradient using CSS 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

@Nimeshi995

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.

Vote Up Vote Down

@Goswami781

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:

Vote Up Vote Down