13

Estou tendo um problema ao colocar uma imagem de background em minha página. Fiz uns testes e fica dessa forma quando altero o tamanho da janela:

inserir a descrição da imagem aqui

Quando deixo maximizado fica certo:

inserir a descrição da imagem aqui

Como posso ajustar essa imagem para que pegue a tela corretamente?

CSS:

.login-page
{
    background-image: url('nature.jpg');
    background-repeat: no-repeat;
    background-size:100%;
    bottom: 0;
    color: black;
    left: 0;
    overflow: auto;
    padding: 3em;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;

}
.login-page h1
{
    font-weight: 300;
}
.login-page h1 small
{
    color: gray;
}
.login-page .form-group
{
    padding: 8px 0;
}
.login-page .form-content
{
    padding: 40px 0;
}

Página:

<html>
<head>
    <meta charset="utf-8">
    <title>Meus Contatos</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="public/libs/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="public/styles/style.css"/>

</head>
<body>
    <div class=login-page>

   <div class=row>
      <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
         <h1>Sistema Teste<small> versão 1.0</small></h1>
         <form role=form ng-submit=submit()>
            <div class=form-content>
               <div class=form-group> <input type=text class="form-control input-underline input-lg" placeholder=Email> </div>
               <div class=form-group> <input type=password class="form-control input-underline input-lg" placeholder=Password> </div>
            </div>
            <button type=submit class="btn btn-white btn-outline btn-lg btn-rounded">Login</button> 
         </form>
      </div>
   </div>
</div>
</body>
<html>

2 Respostas 2

14

Você pode apenas adicionar a propriedade background-size: cover; em seu css.

Cover: especifica que a imagem de fundo deve ser dimensionado de modo que seja tão pequena quanto possível ao mesmo tempo assegurar que ambas as dimensões são maiores do que ou igual à dimensão correspondente do recipiente.

Ficaria assim o seu css:

    .login-page
{
    background-image: url('nature.jpg');
    background-repeat: no-repeat;
    background-size:100%;
    bottom: 0;
    color: black;
    left: 0;
    overflow: auto;
    padding: 3em;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    background-size: cover;
}

Veja um exemplo no JSFiddle.

Caso queira saber mais, veja aqui.

Edit

Você também pode chamar a imagem de acordo com a resolução, utilizando Media Queries. Dessa forma, você escolhe a resolução para a imagem ser chamada. Logo, você precisará ter uma imagem "tratada" para cada resolução. Um exemplo seria assim:

@media (min-width: 768px) {
    .login-page
{
    background-image: url('img200.jpg');
    background-repeat: no-repeat;
    bottom: 0;
    color: black;
    left: 0;
    overflow: auto;
    padding: 3em;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;


}
}

@media (min-width: 992px) {
  .login-page
{
    background-image: url('img600.jpg');
    background-repeat: no-repeat;
    bottom: 0;
    color: black;
    left: 0;
    overflow: auto;
    padding: 3em;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;


}
}

@media (min-width: 1200px) {
   .login-page
{
    background-image: url('img1000.jpg');
    background-repeat: no-repeat;
    bottom: 0;
    color: black;
    left: 0;
    overflow: auto;
    padding: 3em;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;


}
}

Dessa forma, um dispositivo com resolução menor que 768px irá utilizar a img200.jpg, e assim por diante. Se você observar, o Bootstrao já possui media queries, podendo até customizar as resoluções.

Obs.: Ao invés de ficar diminuindo o tamanho do browser, utiliza as ferramentas do desenvolvedor (F12) e escolha o aparelho desejado.

2
  • 1
    Obrigado @Randrade Commented 17/09/2015 às 13:29
  • 1
    Gostaria de agradecer utilizei a primeira opção acima e funcionou mais do que perfeito ficou TOPPPP resolveu minha vida ... Muito obrigado ... Utilizei essa opção: .login-page { background-image: url('nature.jpg'); background-repeat: no-repeat; background-size:100%; bottom: 0; color: black; left: 0; overflow: auto; padding: 3em; position: absolute; right: 0; text-align: center; top: 0; background-size: cover; } Commented 28/09/2018 às 1:25
3

já tentou usar o background-size deste modo?

background-size:100% 100%;

ou deste modo:

background-size:auto 100%;

Também pode usar este modo:

html { 
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

Exemplo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
Site onde encontrei a resposta: https://css-tricks.com/perfect-full-page-background-image/

5
  • tentei a primeira opção, porém quando mexo no tamanho da página a imagem fica "ruim". Commented 17/09/2015 às 11:58
  • Achei esse site "css-tricks.com/perfect-full-page-background-image" que possui um exemplo bom, vou editar meu comentário. Commented 17/09/2015 às 12:12
  • assim ela se redimensiona conforme o tamanho da tela, porém corta um pouco na horizontal. Commented 17/09/2015 às 12:18
  • 1
    Ela corta provavelmente pela resolução da imagem ser proporcionalmente diferente do monitor. Este código deixa a imagem sem em 100% da tela, creio que isto seja o mais próximo do que desejas. Mas podes ainda usar a TAG media no CSS para ajustar a imagem de acordo com a resolução. Referência em W3school: "w3schools.com/cssref/css3_pr_mediaquery.asp" Commented 17/09/2015 às 12:32
  • Entendi, obrigado pela resposta irei tentar arrumar. Commented 17/09/2015 às 12:35

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 .