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>
Yeah, when I took the contents of . Cad-img-overlay, the behavior went back to standard. Thank you very much!
– Patrick Nascimento