Html Question posted in
Some basic documentation can be found here.

Html – Center a form within a background image and box

I have a background container/box called "question-box", inside this box I have an image. On this container/box and image I want a form/input box to be in the centre of this box.

.question-box {
  width: 50%;
  height: 400px;
  /* make dependent on content inside */
  /*padding: 50px;*/
  margin: auto;
  border: 10px solid #6c85bd;
  box-sizing: border-box;
  border-radius: 25px;
  position: relative;
}

.question-box img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
}

.question-box form {
  display: block;
  height: 50%;
  position: absolute;
}

input {
  width: 100%;
}
<div class="question-box">
  <img src="<?php echo htmlspecialchars($defaultImage2); ?>"></img>
  <form class="form" action="" method="post">
    <input type="text" name="name" placeholder="Name..">
    <button type="submit" name="submit">Sign up!</button>
  </form>
</div>

The Classes "question-box" and "img" don’t have any relevant problems.

I have tried majority of things accessed in quick searching, however because I am knew to CSS I don’t think I did it correctly and that is why my code isn’t working?

Tags:

2

Answers


  1. 0

    Update your css with this:

    .question-box form {
   display: block;
   height: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

    This will centralize the form for you.

    Login or Signup to reply.
  2. 0

    If the image’s sole purpose is to be rendered as the box’s background, use CSS for the background instead of the img element.

    And since the image is fetched with some php script, then use the style attribute for the .question-box div and inject the php statement there for the css property background-image: ....;

    Now that we got rid of the img element, use these css properties to center you .question-box content:

    .question-box{
   /*Your previous properties*/
   display:flex;
   flex-direction:column;
   justify-content: center;
   align-items: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search