The Textfields And Label Are Not Getting Placed Over The Image
There is two file one is html and css The first page contain the button to open a modal. I want to place a background image in modal but my contents are getting down while placing
Solution 1:
I hope it's will help you :
<style>
/* Hidden by default */
.ab{
text-align: center;
}
h2{
text-align: center;
padding-top: 200px;
}
button{
width: 300px;
height: 40px;
}
/* Seting The Log-in Modal */
.my_modal{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-animated{
background-image: url(http://artatm.com/wp-content/uploads/2010/04/wallpaper_182372.jpg);
height: 100%;
width: 50%;
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
margin:5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
}
.backg{
<image
}
/* Login- close button */
.close{
position: absolute;
right: 25px;
top: 0;
color: aqua;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus{
color: red;
cursor: pointer;
}
/* setting login image background & resizing vatar */
.img-container{
background-size: cover;
height: 300px;
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar{
width: 40%;
border-radius: 60%;
}
input[type="text"], input[type="password"]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type="text"]{
display: block;
}
.container{
padding: 16px;
}
button[type="submit"]{
width: 50vw;
height: 3vw;
display: block;
font-family: 'Varela Round', sans-serif;
font-size: 2vw;
letter-spacing: 0.1em;
color: #e8e8e8;
border: none;
border-radius: 10px;
outline: none;
background: linear-gradient(45deg, #4CAF50, teal, #4CAF50);
background-size: 400% 400%;
box-shadow: 1vw 1vw 0 green;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 20px;
}
button[type="submit"]:hover {
animation: gradient 10s ease infinite;
font-size: 2.05vw;
box-shadow: 0.2vw 0.2vw 0 lightcoral;
}
@keyframes gradient {
50% {
background-position: 100% 0;
}
}
</style><html>
<body>
<div class="ab">
<h2>Hello!!!</h2>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Register</button>
</div>
<div id= "id01" class="my_modal">
<form class="modal-animated animate" action="actionpahe.php">
<div class="img-container">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="avatar-05.png" alt="Avatar" class="avatar">
<div class="contents">
<label><b>Username</b></label>
<input type= "text" placeholder="Enter User_name" name= "uname" required>
<label><b>Password</b></label>
<input type= "password" placeholder="Enter Pass_code" name="pwd" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked">Remember Me
</div>
</div>
</form>
</div>
</body>
</html>Solution 2:
You can use the CSS position: relative; to move it around REALLY easily. Your CSS code where you style the inputs would look like this,
<style>
/* Hidden by default */
.ab{
text-align: center;
}
h2{
text-align: center;
padding-top: 200px;
}
button{
width: 300px;
height: 40px;
}
/* Seting The Log-in Modal */
.my_modal{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-animated{
height: 100%;
width: 50%;
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
margin:5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
}
.backg{
<image
}
/* Login- close button */
.close{
position: absolute;
right: 25px;
top: 0;
color: aqua;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus{
color: red;
cursor: pointer;
}
/* setting login image background & resizing vatar */
.img-container{
background-image: url(http://artatm.com/wp-content/uploads/2010/04/wallpaper_182372.jpg);
background-size: cover;
height: 300px;
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar{
width: 40%;
border-radius: 60%;
}
input[type="text"], input[type="password"]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
position: relative;
top: -210px;
}
label{
position: relative;
top: -215px;
color: white;
font-family: Arial;
}
.container{
padding: 16px;
}
button[type="submit"]{
width: 50vw;
height: 3vw;
position: absolute;
left: 49vw;
top: 110vh;
transform: translate(-50%, -80%);
font-family: 'Varela Round', sans-serif;
font-size: 2vw;
letter-spacing: 0.1em;
color: #e8e8e8;
border: none;
border-radius: 10px;
outline: none;
background: linear-gradient(45deg, #4CAF50, teal, #4CAF50);
background-size: 400% 400%;
box-shadow: 1vw 1vw 0 green;
cursor: pointer;
transition: all 0.3s ease;
}
button[type="submit"]:hover {
animation: gradient 10s ease infinite;
font-size: 2.05vw;
box-shadow: 0.2vw 0.2vw 0 lightcoral;
}
@keyframes gradient {
50% {
background-position: 100% 0;
}
}
</style><html>
<body>
<div class="ab">
<h2>Hello!!!</h2>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Register</button>
</div>
<div id= "id01" class="my_modal">
<form class="modal-animated animate" action="actionpahe.php">
<div class="img-container">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="avatar-05.png" alt="Avatar" class="avatar">
</div>
<div class="contents">
<label><b>Username</b></label>
<input type= "text" placeholder="Enter User_name" name= "uname" required>
<label><b>Password</b></label>
<input type= "password" placeholder="Enter Pass_code" name="pwd" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked">Remember Me
</div>
</form>
</div>
</body>
</html>I hope this works. If you run the snippet, you will see that the images and labels are over the image. Good luck with your project.
Solution 3:
<style>
/* Hidden by default */
.ab{
text-align: center;
}
h2{
text-align: center;
padding-top: 200px;
}
button{
width: 300px;
height: 40px;
}
/* Seting The Log-in Modal */
.my_modal{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-animated{
height: 100%;
width: 50%;
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
margin:5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
}
.backg{
<image
}
/* Login- close button */
.close{
position: absolute;
right: 25px;
top: 0;
color: aqua;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus{
color: red;
cursor: pointer;
}
/* setting login image background & resizing vatar */
#id01{
background-image: url(http://artatm.com/wp-content/uploads/2010/04/wallpaper_182372.jpg);
background-size: cover;
height: 300px;
text-align: center;
margin: 24px 0 12px 0;
position: relative;
width:900px;
position: absolute;
}
img.avatar{
width: 40%;
border-radius: 60%;
}
input[type="text"], input[type="password"]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.container{
padding: 16px;
}
button[type="submit"]{
width: 50vw;
height: 3vw;
position: absolute;
left: 49vw;
top: 110vh;
transform: translate(-50%, -80%);
font-family: 'Varela Round', sans-serif;
font-size: 2vw;
letter-spacing: 0.1em;
color: #e8e8e8;
border: none;
border-radius: 10px;
outline: none;
background: linear-gradient(45deg, #4CAF50, teal, #4CAF50);
background-size: 400% 400%;
box-shadow: 1vw 1vw 0 green;
cursor: pointer;
transition: all 0.3s ease;
}
button[type="submit"]:hover {
animation: gradient 10s ease infinite;
font-size: 2.05vw;
box-shadow: 0.2vw 0.2vw 0 lightcoral;
}
@keyframes gradient {
50% {
background-position: 100% 0;
}
}
</style>
<html>
<body>
<div class="ab">
<h2>Hello!!!</h2>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Register</button>
</div>
<div id= "id01" class="my_modal">
<form class="modal-animated animate" action="actionpahe.php">
<div class="img-container">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="contents">
<label><b>Username</b></label>
<input type= "text" placeholder="Enter User_name" name= "uname" required>
<label><b>Password</b></label>
<input type= "password" placeholder="Enter Pass_code" name="pwd" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked">Remember Me
</div>
</form>
</div>
</body>
</html>
Post a Comment for "The Textfields And Label Are Not Getting Placed Over The Image"