Quiero colocar un carousel en el inicio de mi página pero estoy teniendo problemas con el. He conseguido que las imágenes tengan el mismo tamaño y queden fijas en la pantalla normal pero cuando cambio el tamaño de la pantalla, la imagen se va moviendo y quiero que se quede fija tal cual está en la pantalla normal...también el texto se va hacia abajo hasta desaparecer. ¿A que se debe? Gracias por la ayuda, un saludo!
.carousel-item {
height: 80vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
}
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="assets/css/site.css" rel="stylesheet">
<title>Healthy Natural Juice BAR</title>
</head>
<body>
<!--INICIO-->
<div id="carouselExampleCaptions" class="carousel slide padding-portada" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/img/zumos1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Zumos Naturales</h1>
<p>100% artesanales</p>
<button type="button" class="btn btn-success">Ver Aquí</button>
</div>
</div>
<div class="carousel-item">
<img src="assets/img/tienda.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Horario de atención</h1>
<p>Lunes a Viernes 8:00 - 14:00 / 17:30 - 21:00 - Sábados y Domingos 8:00 - 21:00</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>