Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Não consigo colocar uma imagem background na minha section

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;

}
1 resposta
solução!

Consegui consertar este usando no css as propriedades:

background: url('../img/back.png')

Ps: Não sei excluir meu próprio post, por isso eu o respondi