CSS como resolver problemas com background

Cordas · 23 de julho de 2020

Opa,

Encontrei diversas maneiras de definir um backgound.

A exemplo eu tenho o seguinte:

- uma imagem 1920x1080 (isso não importa, pois já fiz com outros tamanhos e dá no mesmo resultado) para cada experimento.

- um html para cada

- um css para cada.

1º - HTML + CSS + RESULTADO

<body>
<section id="home"></section>
</body>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html #home{
    background: url("../images/background-home.png") center center no-repeat;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;

}

RESULTADO

2º - HTML + CSS + RESULTADO

<body>
<section id="home"></section>
</body>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
    background: url("../images/background-home.png") no-repeat center center;
    width: 100%;
    height: 100%;

}

RESULTADO

3º - HTML + CSS + RESULTADO

<body>
<section id="home">
<img src="images/background-home.png">
</section>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#home img{
width: 100%;
height: 100%;
}

RESULTADO

**ATENCAO: o resultado correto só é mostrado na 3ª tentativa.

Para vcs que tem mais experiência com inserção de backgrounds, existe uma correta maneira de construir isso?

Aqui nesse link

https://css-tricks.com/perfect-full-page-background-image/

existem outras maneiras de fazer, mas nem todas dão um resultado satisfatório. Isso me lembra de quando eu tentei estudar C++ e um instrutor falou que um programador tem de encontrar 5 ou 6 soluções para cada caso

Para finalizar: se eu coloco um background no body, atrás dele tem o HTML, ou seja, a cor padrão será branca(none). Então porque inventaram de colocar um background no HTML?