1

Como posso para fazer um background gradient repetir fora da posição definida para o layout?

Considere a seguinte imagem:

inserir a descrição da imagem aqui

Precisava repetir o verde água e a cor laranja, que também são gradientes.

EDIT:

Exemplo: http://jsfiddle.net/srCN7/

4
  • Quais são as dimensões das áreas de repeat?
    – bfavaretto
    8/05/2014 às 18:34
  • O problema está aí... não tem dimensões, qualquer resolução tem que repetir.
    – user8414
    8/05/2014 às 21:27
  • Mostre a estrutura do seu HTML, sem isso fica difícil ajudar.
    – bfavaretto
    8/05/2014 às 21:30
  • Veja: jsfiddle.net/srCN7
    – user8414
    8/05/2014 às 23:26

1 Resposta 1

1

Não sei se eu entendi bem o que você quer, veja se é isso:

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/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .