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>

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?

2 Answers 2

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:

2
  • 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, 2010 at 18:52
  • @fewpeople - Added alternative. Sep 24, 2010 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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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