Eu ainda tenho dúvidas sobre o espaço que as imagens ocupam na tela. Por que o background-img não ocupa toda a tela da section (pq ela não fica por baixo do h1 e da img combo+ ocupando cada canto da tela?)
vídeo https://cursos.alura.com.br/course/html-css-praticando-html-css/task/103160 
Olá Maicon
O background-image é uma propriedade de CSS que permite definir uma imagem de fundo para um elemento HTML. No entanto, ela não ocupa necessariamente toda a tela, a menos que você configure explicitamente a imagem para fazê-lo.
Para que a imagem de fundo ocupe toda a tela, é necessário definir as seguintes propriedades:
section {
background-image: url('your-image-url.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
}
background-size: cover: A propriedade cover é usada para ajustar a imagem de tal forma que ela preencha toda a seção, sem distorcer a imagem e cortando a parte que não cabe.
background-position: center: Centraliza a imagem na seção
background-repeat: no-repeat: impede que a imagem se repita.
height: 100vh: Define a altura da seção para 100% da altura da tela.
Além disso, para que a imagem fique por trás do h1 e da img combo, é necessário colocar esses elementos dentro da seção e dar a eles uma posição relativa e z-index maior, para que fiquem por cima da imagem de fundo
section {
position: relative;
}
section h1, section img{
position: relative;
z-index: 1;
}
É importante lembrar que, dependendo da estrutura do seu HTML, pode ser necessário ajustar a posição de elementos dentro da seção e aplicar outras propriedades de CSS para obter o resultado desejado.