ruzD ruzD - 1 month ago 6
CSS Question

Bootstrap & CSS - Input button background image(icon size)

I have a login screen with two input boxes and a button. I would like to put an background icon in each. For this I use css styles.

Now I have a background image in the input boxes but I have a problems with the size, it's very large to input box.

Code:

.btn {
/*font-family: Gotham-Medium; Si activem no surten les icones */
padding: 3px 6px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
background-color: #636363;
color: #fff;
border-radius: 0;
border-color: #fff;
font-size: large;
}
.btn-group {
font-family: Gotham-Medium;
}
.pull-left {
padding-right: 5px; /* Distancia separaciĆ³n entre botones toolbar. */
}
.btn-addcom{
background-color: #009fe3;
font-size: medium !important;
font-family: Gotham-Medium !important;
}
.img-logo-login {
width: 223px;
height: 194px;
}

/* LOGIN */

.login-user{
width: 223px;
text-align: center;
background: url('../../assets/images/login-user-black.png') no-repeat scroll 2px 2px;
padding-left: 30px;
}
.login-pass{
width: 223px;
text-align: center;
background: url('../../assets/images/login-pass-black.png') no-repeat scroll 3px 3px;
padding-left: 30px;
}
.login-button{
padding: 3px 6px;
width: 223px;
text-align: center;
background-image: url('../../assets/images/login.png') no-repeat scroll 3px 3px;
padding-left: 30px;
}

input{
padding: 3px 6px;
font-family: Gotham-Medium;
background-color: #fff !important;
color: #636363 !important;
border: 0 !important;
border-bottom: 2px solid #dddddd !important;
}

/* FOOTER */

footer {
position: fixed;
height: 75px;
bottom: 0;
width: 100%;
}

<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<img class="img-logo-login" src="assets/images/Logo ADDcloud300-2.jpg"/>
</div>
</div>

<form action="connect_start.php" method="post">
<div class="row">
<div class="col-md-12 text-center">
<input type="text" class="login-user" placeholder="USUARI" name="username" required autofocus>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<input type="password" class="login-pass" placeholder="PASSWORD" name="password" required>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<button class="btn btn-addcom login-button" type="submit" style="width: 223px;">LOGIN</button>
</div>
</div>
</form>


Screenshot:

enter image description here

Could you help me please?

Answer

background-size: contain maybe...

Comments