カスタム入力テキストボックス

Question

複数の背景画像を使用して入力ボックスをカスタマイズしようとしていますが、何らかの理由で背景画像が機能しません。

私は何を達成しようとしています。これです：複数の背景画像がある

：

• 
• 

すべてのヘルプは高く評価されます。

.login-block input#username { 
 
    background: #2b2e30 url('https://s27.postimg.org/izumvqjr7/login_input_bg.jpg') 100% 41px no-repeat, url('https://s29.postimg.org/qdrqvmr0n/user_login_icon.png') left 10px no-repeat; 
 
    background-size: 100% 41px; 
 
    background-position: left top; 
 
} 
 
.login-block input { 
 
    border: medium none; 
 
    box-sizing: border-box; 
 
    color: #9c9b9b; 
 
    display: block; 
 
    font-size: 14px; 
 
    height: 41px !important; 
 
    margin-bottom: 20px; 
 
    padding: 0 20px 0 50px; 
 
    width: 100%; 
 
}

<div class="login-block"> 
 
    <input value="" placeholder="Username" id="username" type="text"> 
 
</div>

Answer 1

最初のアイコンを表示し、その後、BG、その後の六角背景

.login-block input#username { 
 
    background:url('https://s29.postimg.org/qdrqvmr0n/user_login_icon.png') 41px 41px no-repeat,url('https://s27.postimg.org/izumvqjr7/login_input_bg.jpg') 100% 41px no-repeat,#2b2e30; 
 
    background-position:10px center, left center; 
 
} 
 

 
.login-block input { 
 
    border: medium none; 
 
    box-sizing: border-box; 
 
    color: #9c9b9b; 
 
    display: block; 
 
    font-size: 14px; 
 
    height: 41px !important; 
 
    margin-bottom: 20px; 
 
    padding: 0 20px 0 50px; 
 
    width: 100%; 
 
}

<div class="login-block"> 
 
    <input value="" placeholder="Username" id="username" type="text"> 
 
</div>