Здравствуйте!
Мне нужно сделать вот такую штуку:
А получается как то так:
Как исправить эту ситуацию?
Заранее благодарен за любую помощь!
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;
}
Ответ
Используйте 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;
}
Комментариев нет:
Отправить комментарий