Картинка в инпуте

#html #css

Здравствуйте! 

Мне нужно сделать вот такую штуку:



А получается как то так:



Как исправить эту ситуацию?
Заранее благодарен за любую помощь!


      input.contacts {
        font-family: "MullerRegular", sans-serif;
        font-size: 13px;
        padding: 10px 126px 10px 40px;
        margin: 20px;
      }
      div.inputname {
        background: url("../img/contact/human.png");
        background-repeat: no-repeat;
        width:55px;
        height:55px;
        position: relative;
        display: inline;
      }
      div.inputphone {
        background: url("../img/contact/phone.png");
        background-repeat: no-repeat;
        display: inline;
        width:55px;
        height:55px;
        position: relative;
      }
      div.inputemail {
        background: url("../img/contact/mail.png");
        background-repeat: no-repeat;
        display: inline;
        width:55px;
        height:55px;
        position: relative;
      }
 

        
    
    

        
    
    

        
    



    

Ответы

Ответ 1

Используйте background-position для установки позиции фонового изображения:



input.contacts {
  font-family: "MullerRegular", sans-serif;
  font-size: 13px;
  padding: 10px 126px 10px 40px;
  margin: 20px;
  background: transparent;
  box-shadow: none;
  border: #ccc solid 1px;
}

div.inputname {
  height: 55px;
  position: relative;
  display: inline;
}

div.inputname input {
  background: url('https://i.stack.imgur.com/GYpu2.png');
  background-repeat: no-repeat;
  background-position: 10px center;
}

div.inputphone {
  display: inline;
  height: 55px;
  position: relative;
}

div.inputphone input {
  background: url('https://i.stack.imgur.com/wp8iA.png');
  background-repeat: no-repeat;
  background-position: 10px center;
}

div.inputemail {
  display: inline;
  height: 55px;
  position: relative;
}

div.inputemail input {
  background: url('https://i.stack.imgur.com/JtqeI.png');
  background-repeat: no-repeat;
  background-position: 10px center;
}

  


  


  



Ответ 2

Всегда делал так



input.contacts {
  border: none;
  background: none;
}

div.input {
  font-family: "MullerRegular", sans-serif;
  font-size: 13px;
  padding: 10px 126px 10px 40px;
  margin: 20px;
  border: 1px solid #ccc;
  width: 200px;
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: 5px;
}

div.input-name {
  background-image: url(http://www.generationwoodworks.com/images/no_male.jpg);
}