Skip to main content
Adição de uma forma alternativa
Fonte Link
Randrade
  • 21,9mil
  • 5
  • 53
  • 133

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.

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.

Fonte Link
Randrade
  • 21,9mil
  • 5
  • 53
  • 133

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.

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