1

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/

5
  • Bootstrap version?
    – j08691
    Jan 29, 2022 at 23:57
  • I am using bootstrap version 5
    – user18068891
    Jan 30, 2022 at 0:01
  • Do you mean this effect - jsfiddle.net/ujkp3mtw ?
    – Banzay
    Jan 30, 2022 at 0:23
  • Not sure if bootstrap has a dedicated class for this but... I believe 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 be background-position: top center if you need to resize the image look into background-size
    – KJEK-Code
    Jan 30, 2022 at 1:19
  • @Banzay something like that, I want to be able to change the position of where the car is, but I do not want the effect you added
    – user18068891
    Jan 30, 2022 at 1:23

1 Answer 1

2

The first point is to try not to use negative position value in your CSS code as much as possible. It's kind of dirty code and may cause some issues in styling later!

Why don't you use background-position to set the position of the image background?

as an example:

.reg-bg {
  background-position: top center;
}

You can find more information here.

2
  • negative values aren't always bad :)
    – Rainbow
    Jan 30, 2022 at 1:39
  • You are right Zohir, and I didn't say never use it! I would say it's a bit hacky and also not easy to read. It has side-effects if you are not aware how to use them where appropriate :) Jan 30, 2022 at 13:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.