0

Como colocar fundo auto ajustável à tela?

Coloquei assim no meu body mas quando entro no celular ele fica cortando o background, só fica até onde tem elemento.

body{
    clear: both;  
    background:url(../img/background-login.png) center center fixed;
    background-size:cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -khtml-background-size: cover;
    -moz-background-size: cover;
     min-height:100% !important;
}
1
  • Mesmo assim ainda nao consegui :/ Commented 13/01/2016 às 19:52

2 Respostas 2

1

Ao invés de usar 100% 100% use cover.

background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
-khtml-background-size: cover;
-moz-background-size: cover;

A diferença é que com 100% 100% ele vai atingir sempre o máximo de 100% seja ele, vertical ou horizontal. Já o cover irá 'cobrir' a div. Mas, em contra partida, ele pode cortar (e certamente irá) cortar ou um pouco das laterais, ou do topo e rodapé da imagem.


Editado:

Tente isso:

body,html {
    min-height:100%;
    //ou
    min-height:100% !important; //Use somente se este não estender o `body`
}
10
  • Dessa forma nao deu amigo Commented 13/01/2016 às 19:11
  • Editei minha resposta, tente. Commented 13/01/2016 às 19:13
  • tentei com min-height tbm e nao consegui Commented 13/01/2016 às 19:20
  • se eu for pelo computador e clicar no debug do f12 e ver como se fosse mobile funciona normal agora se eu vor no celular mesmo nao funciona coloquei dessa forma . body{ clear: both; background:url(../img/background-login.png) no-repeat center center fixed; background-size:cover; -webkit-background-size: cover; -o-background-size: cover; -khtml-background-size: cover; -moz-background-size: cover; min-height:100% !important; } Commented 13/01/2016 às 19:25
  • Edite sua pergunta e coloque o seu body e o css lá, fica mais fácil de visualizar. De preferência todo o css que envolva ele. Commented 13/01/2016 às 19:27
-1

Por favor,tente:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
3
  • ou assim também <pre>background-repeat:no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-position:center; Commented 13/01/2016 às 19:07
  • infelizmente a sua resposta não serve. A propriedade 'contain' não vai preencher o espaço da div. Ele vai funcionar de modo semelhante ao 100% 100%, indo até largura ou altura máxima. Commented 13/01/2016 às 19:09
  • dessa forma nao deu amigo Commented 13/01/2016 às 19:11

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