Why is my background image being cut off? bootstrap

Question

I'm making a simple website using bootstrap and django. I tried to put a background image in a container, it loads the image but the image is getting cut off and I don't know what would be the solution.

It's just a standards login page with a background image what I'm trying to making. here is the code.

{% extends "pages/base.html" %}
{% load bootstrap5 %}

{% block header %}
<div="container my-5">
  <div class="bg-image p-4 rounded" style="background-image:url('https://i.pinimg.com/originals/29/59/a7/2959a7ef45d681584b984c914c0864fc.jpg'); 
              height: 100vh;">
    <h2 class="text-center display-6"> Log in </h2>
    <form method="post" action="{% url 'users:login' %}" class="form" style="max-width: 400px; margin:0 auto;">
      {% csrf_token %}
      {% bootstrap_form form %}
      {% buttons %}
        <button name="submit" class="btn btn-dark">Log in </button>
      {% endbuttons %}
      <input type="hidden" name="next" value="{% url 'my_websites:home' 
%}" />
    </form>
  </div>
</div>

{% endblock header %}

here the original image: https://i.pinimg.com/originals/29/59/a7/2959a7ef45d681584b984c914c0864fc.jpg

thank you so much for your response.

Answer 1

Try this one ??

style="background:url('https://i.pinimg.com/originals/29/59/a7/2959a7ef45d681584b984c914c0864fc.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  height: 100vh;"