Problem repeating background gradient

Question

How can I make a background gradient repeat outside of the set position for the layout?

Consider the following image:

I needed to repeat the water green and the orange color, which are also gradients.

EDIT:

Example: http://jsfiddle.net/srCN7/

Answer 1

I don’t know if I understand what you want, see if this is it:

HTML

<div id='externo'>
    <div id='interno'></div>
</div>

CSS

#externo{
    background: -webkit-linear-gradient(left, #38899f, #df2929, #e8742a); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, #38899f, #df2929, #e8742a); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, #38899f, #df2929, #e8742a); /* For Firefox 3.6 to 15 */
    background: linear-gradient(left, #38899f, #df2929, #e8742a); /* Standard syntax */
    width:800px;
    height:60px;
}
#interno{
    background:#999;
    width:80%;
    margin:0 auto;
    height:55px;
}

http://jsfiddle.net/7vNQ6/