Search code examples
htmlcssbackgroundbackground-image

Background-image don't load an image

I have a problem with using background-image in style in my HTML page.I am creating login page in my Django application and when I execute the page, the background image is not displaying. Interestingly, this code worked yesterday and not today.

I've already deliberately placed the image and the file in one folder to avoid path problems.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title> Test</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

  <style>
    body {
      margin-top: 20px;
      background: rgb(184, 213, 242);
    }
    
    .account-block {
      padding: 0;
      background-image: url('login.jpg') !important;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100%;
      position: relative;
    }
    
    .account-block .overlay {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.4);
    }
    
    .account-block .account-testimonial {
      text-align: center;
      color: #fff;
      position: absolute;
      margin: 0 auto;
      padding: 0 1.75rem;
      bottom: 3rem;
      left: 0;
      right: 0;
    }
    
    .text-theme {
      color: #5369f8 !important;
    }
    
    .btn-theme {
      background-color: #5369f8;
      border-color: #5369f8;
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="main-wrapper" class="container" style="text-align:center; width:100%;">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card border-0">
          <div class="card-body p-0">
            <div class="row no-gutters">
              <div class="col-lg-6">
                <div class="p-5">
                  <div class="mb-5">
                    <h3 class="h4 font-weight-bold text-theme">Login</h3>
                  </div>

                  <h6 class="h5 mb-0">Welcome back!</h6>
                  <p class="text-muted mt-2 mb-5">Enter your User ID and password to access admin panel.</p>

                  <form method="POST" action="">
                    {% csrf_token %}
                    <div class="form-group">
                      <label for="exampleInputText1">User ID</label>
                      <input type="text" name="username" class="form-control" id="exampleInputText1">
                    </div>
                    <div class="form-group mb-5">
                      <label for="exampleInputPassword1">Password</label>
                      <input type="password" name="password" class="form-control" id="exampleInputPassword1">
                    </div>
                    <button type="submit" class="btn btn-theme">Login</button>

                    <a href="#l" class="forgot-link float-right text-primary">Forgot password?</a>
                  </form>
                </div>
              </div>

              <div class="col-lg-6 d-none d-lg-inline-block">
                <div class="account-block rounded-right">
                  <div class="overlay rounded-right"></div>
                  <div class="account-testimonial">
                    <h4 class="text-white mb-4">Test 1</h4>
                    <p class="lead text-white">"Test 2"</p>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <!-- end card-body -->
          {% for message in messages %}
          <p id="messages">{{message}}</p>
          {% endfor %}
        </div>
        <!-- end card -->

        <p class="text-muted text-center mt-3 mb-0">Don't have an account? <a href="{% url 'register' %}" class="text-primary ml-1">register</a></p>

        <!-- end row -->
      </div>
      <!-- end col -->
    </div>
    <!-- Row -->
  </div>
</body>

</html>

Any ideas on how to fix this?

enter image description here

enter image description here

Solution

  • Finally, I have created content folder and: background-image: url('../../static/app/content/login.jpg');