How do I move an image background inside of a container, without moving the container itself?-CodePudding

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 >
  <div >
    <div >
      <div >
        <div >
          <div >
            <h2 >Create an account</h2>
            <form>
              <div >
                <input type="text"  />
                <label >Your Name</label>
              </div>

              <div >
                <input type="email"  />
                <label >Your Email</label>
              </div>

              <div >
                <input type="password"  />
                <label >Password</label>
              </div>

              <div >
                <input type="password"  />
                <label >Repeat your password</label>
              </div>

              <div >
                <button type="button" >Register</button>
              </div>
              <p >Already have an account with us? <a href="login.php" >Login here</a></p>
              <p >Validation email timed out? <a href="revalidation.php" >Click here</a></p>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

jsfiddle: https://jsfiddle.net/p4udb7c3/5/

CodePudding user response：

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.