i want the whole background image to have this"rgba-indigo-light"property but i couldn't do it no matter what i tried. actually my goal is to make the footer and container move when i zoom the page Strangely, when I don't use this class code, my footer moves when I zoom, but my main container dont move.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-image: url('https://cdn.pixabay.com/photo/2018/03/07/18/42/menu-3206749_960_720.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 90vh;
display: flex;
flex-direction: column;
position: relative;
}
footer {
margin-top: auto;
}
</style>
</head>
{% load static %}
{% include 'head.html' %}
<body>
<!-- İçerik -->
<div class="rgba-indigo-light">
<!-- Logout Bar -->
<nav class="navbar navbar-dark rgba-black-light">
<span class="navbar-text" style="color: #F3F3F3;">
Hoş geldiniz, <br>{{ request.user.username }}
</span>
<ul class="navbar-nav ml-auto d-flex flex-row">
<li class="nav-item">
<a class="nav-link" href="{% url 'profile' %}">Profil</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" href="{% url 'login' %}">Çıkış Yap</a>
</li>
</ul>
</nav>
<!-- container başlangıç -->
<div class="container h-100 -flex justify-content-center align-items-center">
<div class="row">
<div class="col-md-12 wow fadeIn">
<div class="text-center white-text">
<ul class="list-unstyled">
<li>
<h1 class="display-4 font-weight-bold white-text wow fadeIn;"
data-wow-delay="0.3s">
<strong>Bugün ne yemek yapmak istiyorsunuz?</strong>
</h1>
</li>
<li>
<h5 class="white-text description mb-5 wow fadeIn" data-wow-delay="0.4s">
Sağlıklı tarifler arayın | {{ total_recipes }} Tarif
</h5>
</li>
<hr>
<form action="{% url 'search' %}" method="get">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist"
aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a data-toggle="collapse" data-parent="#accordionEx"
href="#collapseOne1" aria-expanded="true"
aria-controls="collapseOne1">
<h5 class="mb-0">
Gelişmiş Arama<i
class="fas fa-angle-down rotate-icon"></i>
</h5>
<small class="text-muted">Kategorilere Göre Filtrele</small>
</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse show" role="tabpanel"
aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
<!-- Material checked -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" value="on"
id="breakfast" name="breakfast">
<label class="form-check-label"
for="breakfast">Kahvalti</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" value="on"
id="appetizers" name="appetizers">
<label class="form-check-label"
for="appetizers">Mezeler</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" value="on"
id="lunch" name="lunch">
<label class="form-check-label"
for="lunch">Atıştırmalıklar</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" value="on"
id="salads" name="salads">
<label class="form-check-label"
for="salads">Salatalar</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" value="on"
id="dinner" name="dinner">
<label class="form-check-label"
for="dinner">Akşam Yemekleri</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" value="on"
id="dessert" name="dessert">
<label class="form-check-label"
for="dessert">Tatlılar</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" value="on"
id="easy" name="easy">
<label class="form-check-label" for="easy">Pratik tarif</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" value="on"
id="hard" name="hard">
<label class="form-check-label" for="hard">Zor tarif</label>
</div>
</div>
</div>
</div>
</div>
<!-- Accordion card -->
<li class="wow fadeIn" data-wow-delay="0.4s">
<div class="md-form mb-0">
<input type="text" id="form51" class="form-control" name="search">
<label for="form51" class="">Ara</label>
</div>
<button
class="btn btn-white btn-rounded btn-lg orange-text font-weight-bold ml-lg-0"
type="submit">
<i class="fas fa-search orange-text mr-2"
aria-hidden="true"></i> Tarıfleri göster
</button>
</li>
</form>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="text-center" style="color: white;">
<!-- Grid container -->
<div class="container pt-4">
<h3 style="background: transparent;"><strong>İLETİŞİM</strong></h3>
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a class="btn btn-link btn-floating text-dark m-1"
href="" role="button"
data-mdb-ripple-color="dark"><i class="fab fa-facebook-f"></i></a>
<!-- Twitter -->
<a class="btn btn-link btn-floating text-dark m-1" href=""
role="button" data-mdb-ripple-color="white"><i class="fab fa-twitter"></i></a>
<!-- Instagram -->
<a class="btn btn-link btn-floating text-dark m-1"
href="" role="button"
data-mdb-ripple-color="dark"><i class="fab fa-instagram"></i></a>
<!-- Linkedin -->
<a class="btn btn-link btn-floating text-dark m-1"
href="" role="button"
data-mdb-ripple-color="dark"><i class="fab fa-linkedin"></i></a>
<!-- Github -->
<a class="btn btn-link btn-floating text-dark m-1" href="https://github.com/newdeveloperb4ha"
role="button" data-mdb-ripple-color="dark"><i class="fab fa-github"></i></a>
</section>
<!-- Section: Social media -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3 navbar-dark" style="color: white;">
© 2023 Copyright:
<a class="text-white" href="http://127.0.0.1:8000">CelebiF00D.com</a>
</div>
<!-- Copyright -->
</footer>
{% include 'scripts.html' %}
<script>
// Animation init
new WOW().init();
// Material Select Initialization
$(document).ready(function () {
$('.mdb-select').material_select();
});
</script>
</div>
</body>
</html>
I tried to write the code in head and body but then it doesn't get the whole page I finished the div under the footer but I don't know if I did it right its my photo link its 50% zoom https://prnt.sc/OOY6E-hzk1dR and its 100%zoom https://prnt.sc/yVBERazDGGQf.
