Textbox above image

Question

I am designing a login page in which requirement is to use background image instead of css style sheet. I had placed login page designed image in center, now i want to set textbox and login button above image. Cuurenly i had done it but when ever browser dimension change the textfield also move. How can i fix it even if i open it on any device.

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {
      position: relative;
    }
    .text-block {
      position: absolute;
      top: 238px;
      left: 307px;
      color: white;
    }
  </style>
</head>
<body>
  <div align="center" class="container">
    <div class="text-block">
      <input type="text" style="width: 300px;">
    </div>
    <img src="g1.png" align="middle">
  </div>
</body>
</html>

is it like search icon in textbox? – Jinesh Aug 20 '18 at 09:25 — Jinesh, Aug 20 '18 at 09:25

score 0 · Answer 1 · answered Aug 20 '18 at 09:33

<!doctype html>
<html>
    <head>
        <title>TextBox with Search Icon in HTML and CSS - Tutorial from www.codeofaninja.com</title>
<style>
#search-text-input{
    border-top:thin solid  #e5e5e5;
    border-right:thin solid #e5e5e5;
    border-bottom:0;
    border-left:thin solid  #e5e5e5;
    box-shadow:0px 1px 1px 1px #e5e5e5;
    float:left;
    height:17px;
    margin:.8em 0 0 .5em; 
    outline:0;
    padding:.4em 0 .4em .6em; 
    width:183px; 
}

#button-holder{
    background-color:#f1f1f1;
    border-top:thin solid #e5e5e5;
    box-shadow:1px 1px 1px 1px #e5e5e5;
    cursor:pointer;
    float:left;
    height:27px;
    margin:11px 0 0 0;
    text-align:center;
    width:50px;
}

#button-holder img{
    margin:4px;
    width:20px; 
}
</style>
    </head>
<body>
   <input type='text' placeholder='Search...' id='search-text-input' />
<div id='button-holder'>
    <img src='magnifying_glass.png' />
</div>
</body>
</html>

Above code help you.

Textbox above image

1 Answers1