Menu
Good day developers! I would like to ask if how can I make my form appear on top of my image? The problem is that my form appear at the bottom. Here's the image of my screenshot.
Here are my codes:
HTML
<body>
<div class="container" align="center">
<div id="image">
<img src="assets/img/imac.png" style="width:640px; height:678">
</div>
<div id="loginForm">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please sign in</h3>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me"> Remember Me
</label>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
</fieldset>
</form>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #2ecc71;
}
.container {
width: 1000px;
height: 700px;
margin-top: 100px;
}
#loginForm{
width: 500px;
height: 400px;
}
742
asked Nov 21 '25 23:11
Make the #image be position:absolute and fill the .container (which is made position:relative) with it.
body {
background-color: #2ecc71;
}
.container {
width: 1000px;
height: 700px;
margin-top: 100px;
position:relative;
}
#loginForm {
width: 500px;
height: 400px;
position:relative;
z-index:10;
}
#image{
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
}<div class="container" align="center">
<div id="image">
<img src="http://dummyimage.com/600x678/cccccc/ffffff.jpg&text=monitor+image" style="width:640px; height:678">
</div>
<div id="loginForm">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please sign in</h3>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
</fieldset>
</form>
</div>
</div>
</div>
</div>Create a div the size of the image, and make the image the background image for the div.
Then place a div container inside this div for the form itself. You can then use CSS to position the form div using margins.
<div id="image-container">
<div id="form-container">
// your form
</div>
</div>
#image-container {
width: 500px;
height: 500px;
background: url(/* your image */);
}
#form-container {
width:350px;
margin: 30px auto 0 auto;
}
Obviously, you need to replace the sizes with ones of your actual image, and the margin values to make your form content fit within the screen of the computer in your image.
That should work, I'm coding this on my phone so apologies if I miss something trivial!
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
