0

I am trying to make my site's logo appear 50% from the top and 8% from the left. Here is what I have done so far. Please guide me how can I achieve th

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="css/signin.css">
   <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  <style>
  body { background: url(images/bg.jpg); }
  input { width: 200px;  }
  <style type="text/css">
html, body {
  overflow: hidden;
}
a:hover{
    color:#FFFFFF;
}
</style>
</head>
<body>
<img style="position:absolute;left:0%;top:0%;" src ="images/vector.png"></img>
<img style="position:absolute; margin: 25% 1% 1% 8%" src="images/logo.png"></img>
<div class="container">
  <div class="row">
    <div class="col-sm-4" style="float:right;color:#000; margin-top: 2%; width: 45%;">
      <h3 style="color:#ff9c00"><strong>Login</strong></h3>
 <form role="form" style="color:#FFF;">
    <span class="form-group">
    <!--
      <label for="email">Email:</label>
      -->
      <input style="  width: 46%;
  float: left;
  margin-right: 4%;" type="email" class="form-control " id="email" placeholder="Enter email" >
    </span>
    <span class="form-group">
    <!--
      <label for="pwd">Password:</label>
      -->
      <input style="width: 50%;
  float: left;" type="password" class="form-control" id="pwd" placeholder="Enter password">
    </span>
    <br><br>
    <button type="submit" class="btn btn-default">Login</button>
    <p style="float:right;"><a href="#">Forgot your password</a></p>
  </form>
<br><br><br><br>
  <h3 style="color:#ff9c00"><strong>Register an Account</strong></h3>
 <form role="form" style="color:#FFF;">
    <div class="form-group">
        <label for="usr">Full Name:</label>
  <input type="text" class="form-control" id="usr">
    </div>
        <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
        <div class="form-group">
      <label for="pwd">Confirm Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <!--
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    -->
        <div class="form-group">
        <label for="usr">Mobile Number:</label>
  <input type="text" class="form-control" id="number">
    </div>
    <button type="submit" class="btn btn-default">Signup</button>
  </form>
</div>



    </div>

  </div>
</div>

</body>
</html>
1
  • try like this <img src="images/logo.png" style="position:absolute; margin: 13% 1% 1% 5%">.. hope you want to place logo in d middle of that image
    – G.L.P
    Apr 27, 2015 at 12:34

2 Answers 2

2

Maybe like this

Percentage (%)

<img src="images/logo.png" style="position: absolute; top: 50%; left: 8%">

Pixels (px)

<img src="images/logo.png" style="position:absolute; top: 280px; left: 80px">

Note: Maybe it will be nice if you remove your padding top and bottom from the body

2
  • When I decrease the size of the browser, the image gets displayed at the wrong place.
    – user379888
    Apr 27, 2015 at 12:57
  • it always happen with percentage...if you want to fix the position, you must use the unit measure (px) Apr 27, 2015 at 13:00
0

Try like this

<img src="images/logo.png" style="position:absolute; margin: 13% 1% 1% 5%">
1
  • When I decrease the size of the browser, the logo also moves from its original location.
    – user379888
    Apr 27, 2015 at 12:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.