https://i.sstatic.net/PlCYU.png
Is there a way to prevent the background image from overflowing and causing a horizontal scroll bar to appear? The layout of the page consists of two columns, with each column taking up 50% of the width. The left column contains the login form, while the right side displays the background image and logo. Bootstrap 5.3 is also being used for styling.
Below is the code snippet:
<!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>