Galera, estou tentando colocar uma imagem de fundo no CSS mas por um motivo que não faço ideia de qual seja não está sendo possível!
o código HTML é este
<main class="main">
<div class="container">
<section class="sections">
<section class="bloco" id="sec1">início</section>
<section class="bloco" id="sec2">nossa história</section>
<section class="bloco" id="sec3">
<!-- aqui tem a formatação da seção "sec3". Eu retirei pois é inútil para o tópico e só iria poluir mais -->
</section>
<section class="bloco" id="sec4">atrações</section>
<section class="bloco" id="sec5">contato</section>
</section>
</div>
</main>
Eu quero colocar uma imagem de fundo em cada um dos backgrounds das sections que possuem uma ID cada!
O CSS desta parte (retirei a parte das colunas e linhas só pra ficar mais simples de entender o código ) é este:
/* Main Sections - regular ainda*/
.sections {
text-align: center;
margin-top: 20vh;
}
/* Tamanho da Section - Menu*/
.bloco {
width: 100%;
display: block;
}
/* Background das Sections */
#sec1 {
background-color: orange;
height: 100vh;
}
#sec2 {
background-color: darkorange;
height: 100vh;
}
#sec3 {
height: auto;
}
#sec4 {
background-color: green;
height: 100vh;
}
#sec5 {
background-color: pink;
height: 100vh;
}
Agradeço de coração <3