picture behind signUp form - html

Question

I am doing a vue project,but I want to create a form to log in and put an image behind the form.
I tried, but when I put the image behind the form, it did not appear on the page.
What should I do to add a picture behind the form?
Html:Here in this section I wrote HTML code.
<template>
<div>
<div class="signup-form">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Bootstrap Simple Login Form with Blue Background</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form action="/examples/actions/confirmation.php" method="post">
<h2>Sign Up</h2>
<p>Please fill in this form to create an account!</p>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6"><input type="text" class="form-control" name="first_name"
placeholder="First Name" required="required"></div>
<div class="col-xs-6"><input type="text" class="form-control" name="last_name"
placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email"
required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" `
required="required">`
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm
Password" required="required">
</div>
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" required="required"> I accept the
Terms of Use & Privacy Policy</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
</div>
</form>
<div class="hint-text">Already have an account? Login here</div>
</div> </div>
</template>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
export default {
data: {
counter: 0
}
};
</script>
Css:Here in this section i wrote Css Code.
<style scoped>
body {
color: #fff;
background: #3598dc;
font-family: 'Roboto', sans-serif;
}
.form-control{
height: 41px;
background: #f2f2f2;
box-shadow: none !important;
border: none;
}
.form-control:focus{
background: #e2e2e2;
}
.form-control, .btn{
border-radius: 3px;
}
.signup-form{
width: 390px;
margin: 30px auto;
}
.signup-form form{
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #fff;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form h2 {
color: #333;
font-weight: bold;
margin-top: 0;
}
.signup-form hr {
margin: 0 -30px 20px;
}
.signup-form .form-group{
margin-bottom: 20px;
}
.signup-form input[type="checkbox"]{
margin-top: 3px;
}
.signup-form .row div:first-child{
padding-right: 10px;
}
.signup-form .row div:last-child{
padding-left: 10px;
}
.signup-form .btn{
font-size: 16px;
font-weight: bold;
background: #3598dc;
border: none;
min-width: 140px;
}
.signup-form .btn:hover, .signup-form .btn:focus{
background: #2389cd !important;
outline: none;
}
.signup-form a{
color: #fff;
text-decoration: underline;
}
.signup-form a:hover{
text-decoration: none;
}
.signup-form form a{
color: #3598dc;
text-decoration: none;
}
.signup-form form a:hover{
text-decoration: underline;
}
.signup-form .hint-text {
padding-bottom: 15px;
text-align: center;
}</style>

Answer 1

You can use CSS' position property to stack an element on top of another. Here is an example.
/** GENERAL STYLES **/
* {
box-sizing: border-box;
}
form {
width: 300px;
margin: 1em auto;
border: 1px solid #eee;
}
form .form-group label,
form .form-group input {
width: 100%;
}
form h2 {
margin: 0 0 1em;
}
/** THE FIXES **/
.relative {
position: relative;
}
form .form-content {
padding: 1em;
position: relative;
}
form .behind-form {
position: absolute;
bottom: 0;
width: 100%;
}
form .behind-form img {
width: 100%;
display: block;
}
<form class="relative">
<div class="behind-form">
<img src="https://pixabay.com/get/52e8d3454e56a914f1dc8460da29317e173edce7545972_640.jpg" />
</div>
<div class="form-content">
<h2>Sign Up</h2>
<p>Please fill in this form to create an account!</p>
<div class="form-group">
<label>Name</label>
<input type="text" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" />
</div>
</div>
</form>