Skip to main content
adicionou 24 caracteres ao conteúdo
Fonte Link

Remove html do bloco css:

remover -> html,

Resultado:

body {
    display: table;
    width: 100%;
    height: 100%;
    padding: 100px 0;
    text-align: center;
    color: white;
    background: url(scary_wolf-wide.jpg) no-repeat bottom center scroll;
    background-position: 30% 45%;
    background-color: black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    margin: 0
}

Adiciona um novo bloco CSS:

html{
    height: 100%;
}

Exemplo de resultado:

Exemplo no scratchpad (imagem de fundo usei uma qualquer)

Remove html do bloco css:

Resultado:

body {
    display: table;
    width: 100%;
    height: 100%;
    padding: 100px 0;
    text-align: center;
    color: white;
    background: url(scary_wolf-wide.jpg) no-repeat bottom center scroll;
    background-position: 30% 45%;
    background-color: black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    margin: 0
}

Adiciona um novo bloco CSS:

html{
    height: 100%;
}

Remove html do bloco css:

remover -> html,

Resultado:

body {
    display: table;
    width: 100%;
    height: 100%;
    padding: 100px 0;
    text-align: center;
    color: white;
    background: url(scary_wolf-wide.jpg) no-repeat bottom center scroll;
    background-position: 30% 45%;
    background-color: black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    margin: 0
}

Adiciona um novo bloco CSS:

html{
    height: 100%;
}

Exemplo de resultado:

Exemplo no scratchpad (imagem de fundo usei uma qualquer)

adicionou 427 caracteres ao conteúdo
Fonte Link

Diria que usarRemove html do bloco css: background-size: 100% 100%; vai fazer com que a imagem preencha todo o background, mas certamente ficará com um  

aspect ratioResultado: estranho.

body {
    display: table;
    width: 100%;
    height: 100%;
    padding: 100px 0;
    text-align: center;
    color: white;
    background: url(scary_wolf-wide.jpg) no-repeat bottom center scroll;
    background-position: 30% 45%;
    background-color: black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    margin: 0
}

Adiciona um novo bloco CSS:

html{
    height: 100%;
}

Diria que usar: background-size: 100% 100%; vai fazer com que a imagem preencha todo o background, mas certamente ficará com um aspect ratio estranho.

Remove html do bloco css: 

Resultado:

body {
    display: table;
    width: 100%;
    height: 100%;
    padding: 100px 0;
    text-align: center;
    color: white;
    background: url(scary_wolf-wide.jpg) no-repeat bottom center scroll;
    background-position: 30% 45%;
    background-color: black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    margin: 0
}

Adiciona um novo bloco CSS:

html{
    height: 100%;
}
Fonte Link

Diria que usar: background-size: 100% 100%; vai fazer com que a imagem preencha todo o background, mas certamente ficará com um aspect ratio estranho.