Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Resultado diferente ao considerar o site dabblet e em arquivo HTML/CSS próprio

Olá pessoal!

No site dabblet.com o resultado fica igual ao proposto no exercício, porém em arquivo HTML/CSS "próprio" o gradiente não fica centralizado, porque?

Abaixo os códigos do arquivo HTML e do arquivo CSS. Aguardo vossos comentários, desde já obrigado! Atte., Elías.

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/exerc_avulso_aula6__task05.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light">
    </head>

    <body>

    </body>
</html>
body {
    min-height: 100%;
    background-color: black;
    background-image: linear-gradient(to right, black, #C00, black);
    background-repeat: no-repeat;
    background-size: 80% 5px;
    background-position: 50% 50%;
}
1 resposta
solução!

Oi Elias, com vai?

Esse primeiro valor do bg-position é o X, o segundo o Y, e de acordo com o CSS, ele está centralizado!

O que ocorre? Repare que não tem nenhum conteúdo no body, então o tamanho dele, propriamente dito, vai ser do tamanho do que tem ali, se não tem nada... não tem nada!

Fiz uns testes nesse Jsbin aqui para te mostrar. Repara que quando tem conteúdo, o gradiente vermelho fica no centro!

Uma outra opção seria deixar o bg fixo, com o background-attachment, aí não importa o conteúdo do body.

Espero ter ajudado e bons estudos,

Abcs!