Imagem no Background

Boa tarde Evelise,

Você tentou utilizar o elemento background-image?

#banner{
    width: 100%;
    height: 900px;
    background-image: url('/img/3-ambiente1.png');
    background-repeat: no-repeat;
  }

você pode ler um pouco mais sobre isso no link: https://blog.betrybe.com/css/css-background-image/

Oii,

Pior que sim! Até testei de novo. Só tem funcionado se coloco no corpo do html :/

Evelise,

Parece que está tentado colocar a imagem como por exemplo de um banner, vai depender o qual é seu objetivo para este tópico . Bom primeiro onde você colocou background: linear-gradient(rgba(0,0,0,.50),rgba(0,0,0,.50)100%) url('/img/3-ambiente1.png');

Tem valor inválido está faltando está valor para o ângulo e para colocar a imagem vai precisar utilizar ** background-image**

Para eu dar exemplo parcialmente pode ficar pouco mais avançado nesta fase da aula.

Primeiro no html deve ficar : <img id="banner"> Tire o "src".

No arquivo style.css para você testar .

#banner {

    background-image: url("banner.jpg");
    /*background-color: #FFF;*/

    /*Para seu teste  e está funcional */ 
    /* background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("banner.jpg"); */

    /* Para aprimorar o efeito */
    /* background-size: cover; */ 

    /* Para teste */
    background-position: center;

    /* Para teste */
    /* background-repeat: no-repeat; */

    /* Para teste */
    height: 50vh; /* Fallback para navegadores que não suportam gradientes CSS */
    /*se resolver aumentar o tamanho do banner - vai precisar do background-repeat: no-repeat; */
    /*height: 900px;*/


    width: 100%;
    position: relative; /* Para que o banner fique no centro */
}