CODEWITHSUNDEEP
androidcssmobileuser-interface
Ashok Vishwakarma
Ashok Vishwakarma

Reputation: 689

background no repeat is not working on android browser

I am working on a mobile website have multiple input fields with background on the right, I have added the below css code for the same

.row input
{
    width:100%;
    padding:10px;
    padding-right:30px;
    font-size:18px;
    background-repeat:no-repeat;
}
.row input.name
{
    background:url(/images/mobile_default/icons/name_off.gif) no-repeat right 13px center;
    margin-right:10px;
    border-bottom:1px solid #f0f0f0;
}

And the below HTML for the same

<div class="row last">
    <input name="ccname" placeholder="Name on Card" validate="name" class="name validate" type="text" autocomplete="on"/>
</div>

On Native Android browser it looks repeated background for all input area.

Please let me know if I had mistaken somewhere.

Upvotes: 1

Views: 638

Answers (1)

Dale
Dale

Reputation: 955

I have noticed an error in your css

.row input.name{background:url(/images/mobile_default/icons/name_off.gif) no-repeat right 13px center;margin-right:10px;border-bottom:1px solid #f0f0f0;}

The background-position in your background CSS should only use left or right and then top or bottom values. There is one value too much.

.row input.name{background:url(/images/mobile_default/icons/name_off.gif) no-repeat right center;margin-right:10px;border-bottom:1px solid #f0f0f0;}

Upvotes: 1

Related Questions