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

ABrusola
March 20, 2023
203 views
0 votes
2 Answers

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>

Answers

Chosen as BEST ANSWER

I solved it somehow by adding a 'container-fluid' class on the and added a div that has a 'row' class.

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 {
            max-width: 50%;
            background-image: url("./assets/images/bu-bg.jpg");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <main class="container-fluid">
        <div 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>
        </div> 
    </main>
</body>
</html>

(Edit)

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/[email protected]/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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers