Boa tarde, estou começando nos estudos de HTML e CSS, por isso perdão por qualquer erro de formatação.
O problema com esse código é que estou tentando formar algo como isso: https://imgur.com/a/yajOBbt , mas não consigo adicionar um background nem ao elemento e nem a section.
Ps: Apesar do botão na imagem, eu ainda não o coloquei, por isso este não está presente no código Ps1: O vídeo embutido ao código é meramente ilustrativo
Obrigado desde já
HTML
<div class="video-info" >
<iframe width="100%" height="315" src="https://www.youtube.com/embed/24PnCsZddBk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="info-propriedades">
<h2 class="info-text1">
Assista vídeos, resolva exercícios<br>
e pesquise nos sites recomendados
</h2>
<br>
<h2 class="info-text2">
Aprimore suas técnicas escoteiras<br>
e seu conhecimento sobre o mundo
</h2>
<br>
<h2 class="info-text3">
Conquiste insígnias, especialidades <br>
e realize suas maiores metas
</h2>
</div>
</section>
CSS
.info{
margin: 120px 0px;
background: url("img/back.png");
background-position: center;
}
.info-propriedades{
display: inline-block;
font-family: 'Merriweather Sans', sans-serif;
font-size: 20px;
color: #333333;
line-height: 24px;
position: absolute;
left: 0px;
}
/* SUBSTITUIR POR JAVA SCRIPT NO FUTURO*/
.info-text1{
display:inline-block;
margin-left: 220px;
margin-bottom: 50px;
border: none;
padding: 24px 27px;
box-shadow: 5px 5px #FDE396;
}
.info-text2{
display:inline-block;
margin-left: 160px;
margin-bottom: 50px;
border: none;
padding: 24px 27px;
box-shadow: 5px 5px #FDE396;
}
.info-text3{
display:inline-block;
margin-left: 100px;
margin-bottom: 50px;
border: none;
padding: 24px 27px;
box-shadow: 5px 5px #FDE396;
}
.video-info{
align-items: center;
position: relative;
left: 650px;
display: inline-block;
padding: 20px;
width: 560px;
}