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

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

Respostas: