I have a container being used to hold a registration form. I tried adding position: relative
then using top:
combined with a negative integer to move the image, but what happens instead is that the entire container is being moved, rather than the background image. I am using bootstrap as a frontend framework.
.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/[email protected]/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/
background-position
will help you out if you add it to your.reg-bg
class. You can add 2 properties or specific values. If you would like the image to always be aligned to the top and the center it would just bebackground-position: top center
if you need to resize the image look intobackground-size