0

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?

ruzD
  • 555
  • 1
  • 15
  • 29
  • Can you explain "**I have a lot of problems with the size**"? – Mistalis Oct 25 '16 at 13:49
  • @Mistalis the image is very large. I have tried different options but it doesn't work. I have edited my question. – ruzD Oct 25 '16 at 13:53
  • you can set image size {background-size:} in css – parag parmar Oct 25 '16 at 13:54
  • 1
    If you are using Bootstrap, you might be interested by [this solution](http://stackoverflow.com/questions/38049752/use-an-image-instead-of-a-bootstraps-glyphicon) for using custom images as Bootstrap glyphicons in `input-group`. – Mistalis Oct 25 '16 at 13:57

1 Answers1

1

background-size: contain maybe...

Riccardo De Contardi
  • 2,128
  • 7
  • 17