Hello, I'm trying to make the background of a section with a color on the mobile and with an image on the desktop but it does not work. I'll send the code and the print how it is.
Apparently it looks right, but it does not work at all. Could you help me?
@media (min-width: 1001px) {
#slice-mobile {
background-image: url(assets/img/backgrounds/notebook2.jpg);
background-position: bottom;
background-position-y: 12%;
}
}
@media (max-width: 1000px) {
#slice-mobile {
background-color: #009976 !important
}
}
<section class="slice slice-xl slice1 slicexl1" id="slice-mobile" >
<div class="container">
<div class="row row-grid align-items-center">
<div class="col-lg-6 agenda1">
<div class="pt-lg-lg pb-lg-sm text-center text-lg-left">
<h2 class="h2 text-white mb-2"><span style="border-bottom: 3px solid #5E00DE;">Agenda</span> médica completa</h2>
<p class="lead text-white lh-180">Utilize o Módulo de Agenda para fazer uma gestão completa de todos os seus agendamentos, incluindo atendimentos de ambulatório como consultas e retornos, ou mesmo procedimentos ou atendimentos específicos.</p>
<!-- <div class="countdown h2 text-white" data-countdown-date="12/01/2018" data-countdown-label="hide"></div> -->
<div class="col-lg-12">
<ul class="list-unstyled">
<li style="color: #fff;" class="py-2"><i class="fas fa-check" style="color: #5E00DE;"></i> Visualização da agenda por dia, semana ou mês.
</li>
<li style="color: #fff;" class="py-2"><i class="fas fa-check" style="color: #5E00DE;"></i> Agendamento por profissional, procedimento e local.
</li>
<li style="color: #fff;" class="py-2"><i class="fas fa-check" style="color: #5E00DE;"></i> Confirmação de consultas e retornos e alertas de compromissos.
</li>
</ul>
</div>
<a href="https://localhost/landing_agenda/contato.php" id="iconeView2" class="btn btn-primary btn-circle btn-translate--hover mt-4"> <i class="fas fa-arrow-right arrow"></i> Fale com nossos consultores</a>
</div>
</div>
</div>
</div>
</section>