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: 24px012px0;
position: relative;
}
img.avatar{
width: 40%;
border-radius: 60%;
}
input[type="text"], input[type="password"]{
width: 100%;
padding: 12px20px;
margin: 8px0;
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: 1vw1vw0 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.2vw0.2vw0 lightcoral;
}
@keyframes gradient {
50% {
background-position: 100%0;
}
}
</style><html><body><divclass="ab"><h2>Hello!!!</h2><buttononclick="document.getElementById('id01').style.display='block'"style="width:auto;">Login</button><buttononclick="document.getElementById('id01').style.display='block'"style="width:auto;">Register</button></div><divid= "id01"class="my_modal"><formclass="modal-animated animate"action="actionpahe.php"><divclass="img-container"><spanonclick="document.getElementById('id01').style.display='none'"class="close"title="Close Modal">×</span><imgsrc="avatar-05.png"alt="Avatar"class="avatar"><divclass="contents"><label><b>Username</b></label><inputtype= "text"placeholder="Enter User_name"name= "uname"required><label><b>Password</b></label><inputtype= "password"placeholder="Enter Pass_code"name="pwd"required><buttontype="submit">Login</button><inputtype="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: 24px012px0;
position: relative;
}
img.avatar{
width: 40%;
border-radius: 60%;
}
input[type="text"], input[type="password"]{
width: 100%;
padding: 12px20px;
margin: 8px0;
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: 1vw1vw0 green;
cursor: pointer;
transition: all 0.3s ease;
}
button[type="submit"]:hover {
animation: gradient 10s ease infinite;
font-size: 2.05vw;
box-shadow: 0.2vw0.2vw0 lightcoral;
}
@keyframes gradient {
50% {
background-position: 100%0;
}
}
</style><html><body><divclass="ab"><h2>Hello!!!</h2><buttononclick="document.getElementById('id01').style.display='block'"style="width:auto;">Login</button><buttononclick="document.getElementById('id01').style.display='block'"style="width:auto;">Register</button></div><divid= "id01"class="my_modal"><formclass="modal-animated animate"action="actionpahe.php"><divclass="img-container"><spanonclick="document.getElementById('id01').style.display='none'"class="close"title="Close Modal">×</span><imgsrc="avatar-05.png"alt="Avatar"class="avatar"></div><divclass="contents"><label><b>Username</b></label><inputtype= "text"placeholder="Enter User_name"name= "uname"required><label><b>Password</b></label><inputtype= "password"placeholder="Enter Pass_code"name="pwd"required><buttontype="submit">Login</button><inputtype="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: 24px012px0;
position: relative;
width:900px;
position: absolute;
}
img.avatar{
width: 40%;
border-radius: 60%;
}
input[type="text"], input[type="password"]{
width: 100%;
padding: 12px20px;
margin: 8px0;
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: 1vw1vw0 green;
cursor: pointer;
transition: all 0.3s ease;
}
button[type="submit"]:hover {
animation: gradient 10s ease infinite;
font-size: 2.05vw;
box-shadow: 0.2vw0.2vw0 lightcoral;
}
@keyframes gradient {
50% {
background-position: 100%0;
}
}
</style><html><body><divclass="ab"><h2>Hello!!!</h2><buttononclick="document.getElementById('id01').style.display='block'"style="width:auto;">Login</button><buttononclick="document.getElementById('id01').style.display='block'"style="width:auto;">Register</button></div><divid= "id01"class="my_modal"><formclass="modal-animated animate"action="actionpahe.php"><divclass="img-container"><spanonclick="document.getElementById('id01').style.display='none'"class="close"title="Close Modal">×</span></div><divclass="contents"><label><b>Username</b></label><inputtype= "text"placeholder="Enter User_name"name= "uname"required><label><b>Password</b></label><inputtype= "password"placeholder="Enter Pass_code"name="pwd"required><buttontype="submit">Login</button><inputtype="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"