Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
add comment

2 Answers

up vote 4 down vote accepted

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:

share|improve this answer
    
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
add comment

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.

share|improve this answer
    
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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