2014-05-08 5 views
-4

Je me demande comment créer un arrière-plan dégradé à répéter en dehors de la disposition définie.Fond de répétition dégradé CSS

http://i.imgur.com/CYk2FiE.png

nécessaire de répéter le vert d'eau et orange, qui sont également des gradients.

Merci.

+0

n'est pas cette bande de gradient est juste un élément (comme un div) couvrant toute la page? Si c'est le cas, vous pouvez simplement utiliser linéaire-gradient avec des arrêts de couleur appropriés. –

+0

Nécessité de répéter les parties en dehors du noir (droite et gauche) pour toute résolution. – user8414

Répondre

0
<body> 
    <div id="header" style="width:1316px;height:80px;"> 
     <div style="width:150px;height:72px;background-color:white;float:left;">repeat</div> 
     <div id="header-internal" style="background-color:gray;float:left;"> 
      1016px 
     </div> 
     <div style="background-color:white;width:150px;height:72px;float:left;">repeat</div> 
    </div> 
    <div id="content"> 
     what repeat background header left and right? two colors different? 
    </div> 
    <div id="footer"> 
     footer 
    </div> 
    <br /> <br /> <br /> 
    Should look like: 
    <img src="http://i.stack.imgur.com/KCbiK.png" /> 
</body> 

et Css serait

body { 
    margin:0; 
    padding:0; 
} 
#header { 
    background:url("http://s10.postimg.org/jfhegkq49/bg_center.jpg") no-repeat; 
    background-position: bottom center; 
    background-color: #EFEFEF; 
background-size:100%; 
    height: 80px; 
} 

#header-internal{ 
    margin: 0 auto; 
    height: 72px; 
    width: 1015px; 
} 

#footer { 
    background-color: red; 
    height: 80px; 
    margin-top:20px; 
} 
+0

Exemple mon problème: http://jsfiddle.net/srCN7/ – user8414

+0

modifié ma réponse, essayez celui-ci – loli