While working on a registration form, I encountered an issue with moving the background image within a container. Despite adding position: relative and using top: with a negative value to shift the image, the entire container moved instead of just the background image. My frontend framework is Bootstrap.
.mt {
margin-top: 25px;
margin-bottom: 25px;
}
.reg-bg {
background-image: url("../img/reg-bg.png");
background-repeat: no-repeat;
border-radius: 15px;
}
.reg-btn {
background-color: #003049;
color: #FCBF49;
width: 150px;
height: 50px;
font-size: 20px;
}
.reg-btn:hover {
background-color: #FCBF49;
color: #003049;
}<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaafb4aab4a8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<div class=" mask d-flex align-items-center mt">
<div class=" container ">
<div class="row d-flex justify-content-center align-items-center">
<div class=" col-12 col-md-9 col-lg-7 col-xl-6">
<div class="reg-bg card">
<div class=" card-body p-5">
<h2 class="text-uppercase text-center mb-5">Create an account</h2>
<form>
<div class="form-outline mb-4">
<input type="text" class="form-bg form-control form-control-lg" />
<label class="form-label">Your Name</label>
</div>
<div class=" form-outline mb-4">
<input type="email" class="form-bg form-control form-control-lg" />
<label class="form-label">Your Email</label>
</div>
<div class="form-outline mb-4">
<input type="password" class="form-bg form-control form-control-lg" />
<label class="form-label">Password</label>
</div>
<div class="form-outline mb-4">
<input type="password" class="form-bg form-control form-control-lg" />
<label class="form-label">Repeat your password</label>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="btn reg-btn">Register</button>
</div>
<p class="reg-ft text-center mt-5 mb-0">Already have an account with us? <a href="login.php" class="reg-ft-bld">Login here</a></p>
<p class="reg-ft text-center">Validation email timed out? <a href="revalidation.php" class="reg-ft-bld">Click here</a></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>jsfiddle: https://jsfiddle.net/p4udb7c3/5/