I want the background image to be the size of its parent container

March 20, 2023

How can I prevent the background image to overflow so that the horizontal scroll bar wont appear? The layout of this page is two columns which the width of each part will be 50-50, the left part will be the login form and the right side will be the background image and logo. I also used bootstrap 5.3.

Here’s the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <?php include_once './include/head.php'?>
    <title>Login</title>
    <style>
        .login-form-section {
            display: grid;
            place-items: center;
        }

        .photo-logo-section {
            background-image: url("./assets/images/bu-bg.jpg");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            overflow: hidden;
        }

        #dark-hue {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            mix-blend-mode: multiply;
        }
    </style>
</head>
<body>
    <main class="row" style="height: 100vh;">
        <section class="login-form-section col-lg-6">
            <form action="" method="post">
                <div class="form-group w-100">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" class="form-control" required>
                </div>
            </form>
        </section>

        <section class="photo-logo-section col-lg-6">
            <div id="dark-hue"></div>
        </section>
    </main>
</body>
</html>

>Solution :

The problem is not the image but the default gutter included by Bootstrap with the .row classname. You can remove these gutters by adding .g-0 classname along with the .row:

<main class="row g-0" style="height: 100vh">
 ...
</main>

Here is an example that works. Be sure to view the example in full screen mode:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <style>
      .login-form-section {
        display: grid;
        place-items: center;
      }

      .photo-logo-section {
        background-image: url('https://source.unsplash.com/VWcPlbHglYc');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        overflow: hidden;
      }

      #dark-hue {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <main class="row g-0" style="height: 100vh">
      <section class="login-form-section col-lg-6">
        <form action="" method="post">
          <div class="form-group w-100">
            <label for="email">Email</label>
            <input
              type="email"
              id="email"
              name="email"
              class="form-control"
              required
            />
          </div>
        </form>
      </section>

      <section class="photo-logo-section col-lg-6">
        <div id="dark-hue"></div>
      </section>
    </main>
  </body>
</html>