Background-image does not repeat

Asked

Viewed 128 times

0

I’m learning CSS and Bootstrap, I decided to clone a page I saw on the web to study, it turns out, when I get to mobile, the background-image doesn’t repeat itself and it just disappears when the page goes past the size of the original background.

@charset "utf-8";

body, html {
    height: 100%;
}
body {
    background-image: url("../img/bg.jpg") !important;
    height: 100% !important;
    background-position: top !important;
    background-repeat: repeat;
    background-size: 100% !important;
    color: #FFFFFF !important;
    overflow-x: hidden !important;
    z-index: 9999;
}

.realce {
    background: #000;
    padding: 5px;
    text-transform: uppercase;
    font-weight: bold;
}

.realce2 {
    color: #003ab5;
    text-transform: uppercase;
    font-weight: bold;
}

.botao {
    display: block;
    background: #003ab5;
    color: white;
    border-radius: 20px;
    padding: 10px;
    line-height: 15px;
    margin-left: 20%;
}
.botao:hover {
    background: #000098;
    color: white;
    text-decoration: none;

}

.logo {
    height: 20vh;
}

.wifi {
    height: 20vh;
}

.continue {
    height: 70vh;
    margin-left: -10%;
    margin-top: -8%;
}

.call-action {
    background: #FFF;
    color: #003ab5;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 17pt;
}
    .call-action:hover {
        background: #000;
        color: #fff;
        transition: 0.5s;
        text-decoration: none;
    }


.call-div {
    margin-top: -170px;
}

.box {
    width: 24%;
    background: #000;
    padding: 10px;
}

.box-box {
    width: 100% !important; padding-top: 20px; margin-top: -20px
}

@media (max-width: 800px) {
    .continue {
        height: 70vh;
        margin-left: -13%;
        margin-top: -20%;
        width: 100%;
    }

    .logo {
        width: 100%;
    }

    .call {
        top: 70%;
    }

    .box {
        width: 100%;

    }

    .wifi {
        display: none;
    }

    .botao {
        margin-left: 0;
        width: 100%;
    }

    .o-que-temos {
        margin-top: 200%;
    }
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <!-- Meta tags Obrigatrias -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css?id=<?php echo md5(rand(0,9999999).rand(0,999999999).time())?>">

    <title>Continue seu negócio</title>
</head>
<body>
<div class="container">
    <div class="card text-white bg-transparent" >
        <img class="card-img" src="img/imagem-inicial-720x480.png" alt="Imagem do card">
        <div class="card-img-overlay">
            <img src="img/Logos.png" class="logo">
            <br/>
            <section class="container-fluid">
                <img src="img/continue.png" class="continue"><br/>
            </section>
            <div class="call-div">
                <span class="call" style="font-size: 17pt; font-weight: bold">É hora de seguir <span class="realce">Em frente</span>. É hora de <span class="realce">CRER</span></span>
            </div>
            <div class="row justify-content-between mt-5">
                <section class="box mb-2">
                    Como saber a dose certa de <span class="realce2">Contração</span> do seu negócio nesta crise ?
                </section>
                <section class="box mb-2">
                    Como ter um plano <span class="realce2">recuperação</span> do seu negócio ?
                </section>
                <section class="box mb-2">
                    Como encontrar novas oportunidades e <span class="realce2">expandir</span> ?
                </section>
                <section class="box mb-2">
                    Como preparar sua <span class="realce2">retomada</span> e prosperar no novo normal ?
                </section>
            </div>
            <div class="row justify-content-between mt-5">
                <div class="col-md-5">
                    Atendendo a muitos pedidos, a <span class="realce">Projectlab</span> e
     a <span class="realce">Agile Think</span> desenvolveram um programa completo para te ajudar a entender e implantar o framework <span class="realce">crer</span> em sua empresa
                </div>
                <div class="col-md-5 row justify-content-end">
                    <img src="img/wifi.png" class="wifi">
                </div>
            </div>
            <div class="row justify-content-center mt-5">
                <a href="#" class="call-action col-md-3 text-center col-sm-12">Increva-se agora</a>
            </div>
            <div class="row justify-content-between mt-5">
                <div class="col-md-5 mb-5">
                    <img src="img/Baixe%20o%20framework.png" class="baixe">
                    <a href="#" class="botao col-md-4 text-center">
                        <span style="font-size: 25pt; font-weight: bold">Baixe</span><br/>
                        o framework
                    </a>
                </div>
                <div class="col-md-5 mb-5" style="line-height: 25px">
                    <span style="font-weight: bold; font-size: 30pt">
                        O Framework <br/></span>
                    <span class="realce2" style="font-size: 40pt">Crer</span><br/>
                   <div class="box box-box">
                        prepara executivos, empresários e empreendedores para o enfrentamento da crise
                   </div>
                    <div>
                        <p>Dependendo da situação você pode mudar ou estar em mais de um cenário ao mesmo tempo, e pode transitar de uma para outro de acordo com a evolução da crise e suas ações.</p>
                        <p>
                            Vamos lhe mostrar a melhor forma de navegar por esses cenários e sair mais forte do outro lado.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="container o-que-temos">
            <div class="col-md-5 mb-5" style="line-height: 25px">
                    <span style="font-weight: bold; font-size: 30pt">
                        O que temos <br/></span>
                <div class="box box-box" style="color: #2f33ff; font-weight: bold">
                    no programa continue seu negócio - Framework CRER ?
                </div>
            </div>
            <div class="row justify-content-between">
                <div class="col-md-4">
                    <img src="img/15horas.png">
                </div>
                <div class="col-md-4">
                    <img src="img/14%20horas.png">
                </div>
                <div class="col-md-4">
                    <img src="img/30dias.png">
                </div>
            </div>
        </div>

    </div>
</div>
<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

css twitter-bootstrap

1 answer

0

The problem is in class .card-img-overlay, it holds all the content and has a position: absolute; A class with position: absolute; does not influence body size.

  • Yeah, when I took the contents of . Cad-img-overlay, the behavior went back to standard. Thank you very much!

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.