HTML & CSS - i am not able to edit the background or add images or links to this page

1
Login | Forever Young

Login


  <div class="vl">
    <span class="vl-innertext">or</span>
  </div>

  <div class="col">
    <a href="https://www.facebook.com/" target="_blank" class="fb btn">
      <i class="fa fa-facebook fa-fw"></i>Facebook
     </a>
     <a href="https://accounts.google.com" target="_blank" class="google btn">
       <i class="fa fa-google fa-fw"></i>Google
    </a>
  </div>

  <div class="col">
    <div class="hide-md-lg">
    </div>

    <input type="text" name="username" placeholder="Username" required
    style=" text-align: center">
    <input type="password" name="password" placeholder="Password" required
    style=" text-align: center">
    <div>
      <input type="checkbox" checked="checked"><font color="white">&nbspRemember Me
      </div>
    <input type="submit" value="Login">
    <span class="forgot"><a href="forgot.html">Forgot Password?</a></span>
  </div>

</div>

body {
font-family: Arial, Helvetica, sans-serif;
}

  • {
    box-sizing: border-box;
    }

h1,b{
color: white;
}

/* style the container */
.container {
position: absolute;
text-align: center;
border-radius: 5px;
background-color: #000000;
padding: 10px 0 30px 0;
width: 50%;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* style inputs and link buttons */
input,
.btn {
width: 75%;
padding: 12px;
border: none;
border-radius: 4px;
margin: 5px 0;
opacity: 0.75;
display: inline-block;
font-size: 17px;
line-height: 20px;
text-decoration: none;
}

input:hover,
.btn:hover {
opacity: 1;
}

/* add appropriate colors to fb, twitter and google buttons */
.fb {
background-color: #3B5998;
color: white;
}

.google {
background-color: #dd4b39;
color: white;
}

/* style the submit button */
input[type=submit] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #45a049;
}

input[type=checkbox]{
color: white;
position: relative;

padding-left: 15px;
text-indent: -15px;
width: 13px;
height: 18px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}

span{
display: block;
}
span>a{
text-decoration: none;
color: #4f0080;
}
span>a:hover{
color: white;
}

/* Two-column layout */
.col {
float: left;
width: 50%;
margin: auto;
padding: 0 50px;
margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;
}

/* vertical line */
.vl {
position: absolute;
left: 50%;
transform: translate(-50%);
border: 2px solid #ddd;
height: 175px;
}

/* text inside the vertical line */
.vl-innertext {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 50%;
padding: 8px 10px;
}

/* hide some text on medium and large screens */
.hide-md-lg {
display: none;
}

/* Responsive layout - when the screen is less than 500px wide /
@media screen and (max-width: 500px) {
.col {
width: 100%;
margin-top: 0;
}
/ hide the vertical line /
.vl {
display: none;
}
/ show the hidden text on small screens */
.hide-md-lg {
display: block;
text-align: center;
}
}

Not able to add background image . Can i know what the problem is ??

1 Like
2

I did not find any use of background-image in your css, can you please make it clear exactly what you want.

However, if you want a background image of your page you can use this css for body or where you need

background-image: url("here is your url");

You may also want to fix the background in your own way, in that case you can get details in the link below

background-image / css

Also here
background /css

Thank you.