it-swarm-eu.dev

Horní a dolní gradient pomocí CSS

Mám pozadí, které má horní a dolní gradient a chci, aby se zobrazovalo na vrstvě kontejneru. Problémem je spodní gradient, protože se musí objevit na samém konci div kontejneru. Nějaké nápady? Zde je příklad kódu a imgur fotka:

<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

Výše uvedený kód zobrazuje pouze gradient nahoře, existuje však jiný způsob, jak tohoto efektu dosáhnout?

2
J Lee

Můžete zkusit něco jako:

<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> 

ÚPRAVY PŘIDAT NOVÝ STYL:

4
Joel Etherton

můžete použít pravidla css pro více pozadí

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

To by mělo fungovat.

1
Merstzik