fundo preenchendo tela

[RafaCordL 0]

Estou com uma dúvida boba, quero por uma imagem para acompanhar o tamanho da tela, independente do tamanho dela ou da imagem.

Sendo que o comprimento está acompanhando de acordo com a tela, mas altura não.

Fica no caso a imagem, e no final da tela embaixo, um pedaço da imagem como se estivesse começando de novo.

 

O css está assim:

body {
  background-image: url(../img/fundo.jpg);
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden; }

Onde errei?

[joaohenrique010 0]

Tente isso:

 

background-size:contain;
background-attachment:fixed;

[RafaCordL 0]

Mesma coisa com a tela maximizada, se eu diminuo, aparece mais de uma imagem, fica repetindo. :s

[angelorubin 142]

Veja se ajuda :

 

http://jsfiddle.net/angelorubin/a5m55zbh

http://imasters.com.br/front-end/css/por-que-height-100-nao-funciona

http://css-tricks.com/perfect-full-page-background-image

[WictorP 9]

 

background-size:cover;

ou

 

background-size: 100%;
background-attachment:fixed;

[Lucas Santos Brito 12]

Olá Rafa, bom dia.

 

O seu erro foi tentar determinar o tamanho do background com as propriedades "width" e "height", quando o correto seria utilizar "background-size", desta forma:

body {
  background-image: url(../img/fundo.jpg);
  background-size:100% auto; /* Isso fará com que a largura e altura se adaptem sem distorcer a imagem */
  background-attachment: fixed; /* Isso irá tornar o background fixo */
  background-repeat: no-repeat; /* Isso impedirá que a imagem se repita */
}

O código acima pode tornará a imagem ajustável, no entanto se você for utilizar uma imagem 1024x768, terá problemas com monitores com Height 1024, terá um espaço em branco no final do corpo da página.

Sugiro que trabalhe com Media Queries para identificar a resolução do usuário, isso te dará a opção de determinar uma imagem de fundo para cada resolução.

 

Faça desta forma:

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
   
background-size: 100% auto;
background-attachment: fixed;
background-repeat: no-repeat;
background-image: url(../img/fundo-1366x768.jpg);

}

A imagem "fundo-1366x768.jpg" se ajustará perfeitamente sem distorção para monitores com resolução entre 1024 x 768 e 1366 x 768 !

 

Salve o arquivo de fundo em várias outras resoluções e utilize o tamanho ideal para cada monitor.

Tente e veja se funciona.

 

Espero ter ajudado! Abraços.

[RafaCordL 0]

Veja se ajuda :

 

http://jsfiddle.net/angelorubin/a5m55zbh

http://imasters.com.br/front-end/css/por-que-height-100-nao-funciona

http://css-tricks.com/perfect-full-page-background-image

 

 

background-size:cover;

ou

background-size: 100%;
background-attachment:fixed;

 

 

Olá Rafa, bom dia.

 

O seu erro foi tentar determinar o tamanho do background com as propriedades "width" e "height", quando o correto seria utilizar "background-size", desta forma:

body {
  background-image: url(../img/fundo.jpg);
  background-size:100% auto; /* Isso fará com que a largura e altura se adaptem sem distorcer a imagem */
  background-attachment: fixed; /* Isso irá tornar o background fixo */
  background-repeat: no-repeat; /* Isso impedirá que a imagem se repita */
}

O código acima pode tornará a imagem ajustável, no entanto se você for utilizar uma imagem 1024x768, terá problemas com monitores com Height 1024, terá um espaço em branco no final do corpo da página.

Sugiro que trabalhe com Media Queries para identificar a resolução do usuário, isso te dará a opção de determinar uma imagem de fundo para cada resolução.

 

Faça desta forma:

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
   
background-size: 100% auto;
background-attachment: fixed;
background-repeat: no-repeat;
background-image: url(../img/fundo-1366x768.jpg);

}

A imagem "fundo-1366x768.jpg" se ajustará perfeitamente sem distorção para monitores com resolução entre 1024 x 768 e 1366 x 768 !

 

Salve o arquivo de fundo em várias outras resoluções e utilize o tamanho ideal para cada monitor.

Tente e veja se funciona.

 

Espero ter ajudado! Abraços.

 

Rapazes, testei as 3 soluções, a que mais se encaixou no que eu quero é a do angelorubin , sendo que fiz separado, e ficou so jeito ideal, quando diminuo o tamanho da tela, a imagem vai cortando de acordo com a mesma e ficando sempre centralizada... Mas quando eu coloquei no meu css, quando eu diminuo a imagem inteira diminui, fazendo com que o Pão de Açúcar (que no caso é a imagem), apareça pequeno e o que eu quero é que a imagem continue do mesmo tamanho, apenas que fique centralizando, como se tivesse um quadrado no centro da imagem e eu fosse diminuindo até aparecer só o quadrado...

 

(Ta, sou péssima com explicações, mas acho que devem entender)

 

Dai conclusão, obvio que algo no meu css está impedindo que isso aconteça, mas não faço ideia do que seja, pois o arquivo já está gigante... Deixei para resolver isso no final, dai está me dando dor de cabeça agora...

 

Será que vocês tem alguma ideia do que possa ser que está impedindo isso?

 

Eu fiz assim, como no primeiro link que o angelorubin mandou:

body, 
html {
  height: 100%; }

.fundo{
  color: white;
  background: url('fundo.jpg') no-repeat center center fixed; 
  height: 100%;
  padding: 10px;
  box-sizing: border-box; }

E coloquei a div na header abaixo do body e a fechei na footer em cima do body...

Aiiiiiiiiiiiiiii, ignorem o que eu falei.

O erro estava no Command do Ruby --'

Eu uso sass, dai eu tinha digitado o comando errado e não tinha visto.

Logo... o que eu alterava não mudava...

 

Enfim! Está do jeito que eu queria, muito obrigada! :joia: