Place an <img> behind a signup <div>

Hi there,

I’d like to know how to center and <img> inside a <div> where there’s also another <div> containing a signup form. The <img> should go behind the form <div>.

So structure will be something similar to:

<div class="parent">
    <img class="child-img"/>
    <div class="child-form"></div>
</div>

The child-form should be in front of the <img> tag, both always in the center of the viewport. Due to business constraints, I have to use super basic html usable at least by IE9, so no flex or grid… We use Boostrap 3, trying to switch to 4.

Thanks!
A

I would try either

/*center both img and div and add the following*/
.child-img {
  position: absolute;
  z-index: -1;
}
.child-form {
 z-index: 1
}

or maybe

.child-form {
 position: absolute;
}

or try

.parent {
  background-image: url('your image')
}

Nope not working…and I need to use an <img> tag since we run the image…techincal requirement for performance…

use your image as background-image image on the parent div and then center the child-form div.
there are background-image properties that can center the image.

Did you manage this?

Not really, the code I’ve inherited it’s a bit messed up. I’m having a hard time rewriting the basic CSS. I think there are too many definitions, and some pieces of information are not even seen by the inspector in Chrome. Tomorrow I’ll try to give an update on it.

Sure thing. Let me know if you’ll have the challenge we can check your code together.