In my Vue project, I am trying to create a login form with an image as the background. However, I am facing an issue where the image is not displaying on the page. Can someone guide me on how to add a picture behind the form?
HTML: Below is the HTML code for the section:
<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>
<!-- rest of the form HTML code goes here -->
</form>
<div class="hint-text">Already have an account? <a href="#">Login here</a></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 is the CSS code for styling the form and adding the background image:
<style scoped>
body {
color: #fff;
background: url('path/to/image.jpg') center center / cover no-repeat;
font-family: 'Roboto', sans-serif;
}
.form-control{
/* CSS styles go here */
}
/* rest of the CSS code for styling the form */
.signup-form{
/* CSS styles for signup form */
}
/* remaining CSS styles for form elements */
</style>