O fundo gradiente CSS3 definido no corpo não se estica, mas repete?

430

ok, digamos que o conteúdo <body>totalize 300px de altura.

Se eu definir o plano de fundo do meu <body>uso -webkit-gradientou-moz-linear-gradient

Depois, maximizo minha janela (ou apenas a levo a mais de 300px), o gradiente terá exatamente 300px (a altura do conteúdo) e repito para preencher o restante da janela.

Estou assumindo que isso não é um bug, pois é o mesmo no webkit e no gecko.

Mas existe uma maneira de fazer o gradiente esticar para preencher a janela em vez de repetir?

css gradient

— JD Isaacks
fonte

718

Aplique o seguinte CSS:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Edit: Adicionado margin: 0;à declaração do corpo por comentários ( Martin ).

Edit: Adicionado background-attachment: fixed;à declaração do corpo por comentários ( Johe Green ).

— Bryan Downing
fonte

4

Eu também descobri que eu precisava para adicionar margin:0;no bodyou então eu tenho uma lacuna na parte inferior da minha página.

— Martin

8

No Chrome e Safari, o corpo {height: 100%} resulta na extensão da página (mas não no gradiente) para fora da janela de exibição.

— thSoft

13

Eu tive que adicionar um anexo em segundo plano: fixo; ao corpo para se livrar da lacuna inferior (Webkit).

— J7nn7k

4

Definir um plano de fundo para o corpo e, em seguida, a altura da tag html para 100% faz coisas estranhas no Internet Explorer. Aqui está um exemplo (png).

— Justin Force

21

Certifique-se de que background-repeate background-attachmentvêm após suas backgroundregras. Caso contrário, o fundo ainda poderá se repetir.

— Kellen

159

Em relação a uma resposta anterior, a criação htmle bodya height: 100%não parece trabalho, se as necessidades de conteúdo para rolagem. A adição fixedao plano de fundo parece consertar isso - nãoneed for height: 100%;

Por exemplo:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}

Expandir snippet

— Joshua Rudd
fonte

5

Isso funcionou para mim em todos os navegadores que testei (Chrome [Mac], Safari [Mac], Firefox [Mac / Win7], IE9 [Win7] e Opera [Mac]) sem o efeito colateral da barra de rolagem da "altura: 100%" solução. Obrigado!

— pipwerks

7

Uma observação para as pessoas que usam Sass / Compass. Você não pode definir "fixo" diretamente na mixin de modo a adicionar fixo você adicionar a propriedadebackground-attachment: fixed

— Kyle Mathews

2

Se você quer ter tanto o fundo preencher a janela, ou o conteúdo (o que for maior), em seguida, usar min-height:100%(em navegadores compatíveis)

— cjk

Consegui executar o seguinte código usando o Compass: @include background (gradiente linear (superior, vermelho 0%, azul 100%) fixo);

— mcranston18

Como eu adicionaria uma terceira cor?

— sbaden

17

Eu sei que estou atrasado para a festa, mas aqui está uma resposta mais sólida.

Tudo o que você precisa fazer é usar min-height: 100%;e não, height: 100%;e o plano de fundo gradiente estenderá toda a altura da janela de visualização sem repetir, mesmo que o conteúdo seja rolável.

Como isso:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}

— Ricardo Zea
fonte

A menos que você precise definir a altura do html como 100%, por exemplo, se precisar de rodapé

— fixo

15

Aqui está o que eu fiz para resolver esse problema ... ele mostrará o gradiente para todo o comprimento do conteúdo e, em seguida, simplesmente retornará à cor de fundo (normalmente a última cor do gradiente).

   html {
     background: #cbccc8;
   }
   body {
     background-repeat: no-repeat;
     background: #cbccc8;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
     background: -moz-linear-gradient(top, #fff, #cbccc8);
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
   }

<body>
  <h1>Hello world!</h1>
</body>

Expandir snippet

Eu testei isso no FireFox 3.6, Safari 4 e Chrome, mantenho a cor de plano de fundo no corpo de qualquer navegador que, por algum motivo, não suporte o estilo da tag HTML.

— John Sanford
fonte

13

A configuração html { height: 100%}pode causar estragos no IE. Aqui está um exemplo (png). Mas você sabe o que funciona muito bem? Basta definir seu plano de fundo na <html>tag.

html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

O plano de fundo se estende para a parte inferior e nenhum comportamento de rolagem estranho ocorre. Você pode pular todas as outras correções. E isso é amplamente suportado. Não encontrei um navegador que não permita aplicar um plano de fundo à tag html. É CSS perfeitamente válido e existe há algum tempo. :)

— Justin Force
fonte

1

@ Lynda Isso não é um feedback muito útil. Você se importaria de fornecer um caso em que não funcione?

— Justin Force

Desculpe por ser vago. Não sei por que não funciona. Você pode adicionar um gradiente, htmlmas ele pára parcialmente na página no meu caso. A adição background-attachment:fixedresolve o problema. Vi isso acontecer em mais de um site, mas não consegui encontrar a causa.

— L84

O ponto desta solução é que ela funcionou em vários navegadores (em 2012, a propósito). Mas você ainda não indica em qual navegador está falando. Se você ainda estiver com problemas, tente adicionar html, body { height: 100%; }.

— Justin Force

Verdade. Isso acontece no Firefox e no Chrome (não testei em outros navegadores) e tentei altura e várias outras configurações sem sorte (exceto anexos em segundo plano). Oh, bem, não é grande coisa e espero que sua resposta ainda funcione para a maioria. =>

— L84

Ainda tem que enganar com no-repeat e fixo.

— MarsAndBack

12

Há muita informação parcial nesta página, mas não uma completa. Aqui está o que eu faço:

Crie um gradiente aqui: http://www.colorzilla.com/gradient-editor/
Defina o gradiente em HTML em vez de BODY.
Corrija o plano de fundo no HTML com "background-attachment: fixed;"
Desative as margens superior e inferior do BODY
(opcional) Normalmente, crio um em <DIV id='container'>que coloco todo o meu conteúdo

Aqui está um exemplo:

html {  
  background: #a9e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
  background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-attachment: fixed;
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
#container
{
  width: 800px;
  margin: auto;
  background-color: white;
  border: 1px solid gray;
  border-top: none;
  border-bottom: none;
  box-shadow: 3px 0px 20px #333;
  padding: 10px;
}

Isso foi testado com o IE, Chrome e Firefox em páginas de vários tamanhos e necessidades de rolagem.

— Rick Smith
fonte

1

Ótimo! Eu estava usando o colorzilla e a resposta principal não funcionou para mim. Este fez. Obrigado! :)

— Filly

Por que você prefere fazê-lo em HTML, não em BODY?

— sashaikevich

@sashaikevich Ótima pergunta. Não vejo essa resposta há cinco anos, por isso não me lembro. A razão pela qual fiz isso pode ainda não se aplicar a todas as atualizações do navegador. Se você movesse tudo para o corpo, eu ficaria curioso se funcionasse da mesma maneira.

— Rick Smith

@ RickSmith Não, eu denominei html. Mas mudei as regras para aplicar ao corpo agora mesmo para verificar, e isso não fez diferença. Talvez fosse uma coisa navegador antigo ...

— sashaikevich

4

Sujo; talvez você possa apenas adicionar uma altura mínima: 100%; para o html e as tags do corpo? Isso ou pelo menos definiu uma cor de fundo padrão que também é a cor final do gradiente.

— subv3rsion
fonte

1

O plano de fundo padrão definido como a cor final do gradiente seria uma ótima solução se o gradiente parasse, mas ele não apenas parava que se repete; o plano de fundo padrão só seria visto se o gradiente não fosse suportado.

— JD Isaacks

2

Eu tive problemas para obter as respostas aqui para trabalhar.
Eu achei que funcionava melhor para corrigir uma div em tamanho real no corpo, fornecer um índice z negativo e anexar o gradiente a ele.

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

Aqui está uma amostra completa https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

— morefromalan
fonte

0

Eu usei esse código CSS e funcionou para mim:

html {
  height: 100%;
}
body {
  background: #f6cb4a; /* Old browsers */
  background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
  background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  background-position: 0px 0px;
}

Uma informação relacionada é que você pode criar seus próprios ótimos gradientes em http://www.colorzilla.com/gradient-editor/

/ Sten

— Netsi1964
fonte

-1

background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3),   to(#13486d));  background: -moz-linear-gradient(top,  #9dc3c3,  #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;

— Joe
fonte

1

Por favor, adicione algumas explicações sobre os principais aspectos da sua solução.

— Rachcha

-1

foi o que eu fiz:

html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}

antes de flutuar o corpo, havia uma lacuna na parte superior e mostrava a cor de fundo do html. se eu remover a cor bg do html, quando rolar para baixo, o gradiente será cortado. então eu flutuei o corpo e defini sua posição para relativa e a largura para 100%. trabalhou em safari, chrome, firefox, opera, internet expl .. oh espera. : P

O que é que vocês acham?

— grizzy
fonte

-4

em vez de 100%, eu apenas adiciono alguns pixxel consegui isso agora e funciona para a página inteira sem lacunas:

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }

— SANDER
fonte

3

e as páginas com mais de 1420 px de altura?

— veritas