为什么我的png图像以移动屏幕形式显示？

Question

由于某些原因，在我的iphone上并不是我希望在表单中显示的所有图像都会，只有两个会这样做，而当我将所有div的css更改为与他们仍然没有的两个相同时工作

表单的代码是：

<form action="process_register.php" id="registerForm" method="post">
                    <h1> <a href="http://www.bfi-film-festival.com/login.php">Login here</a></h1>

                    <fieldset>
                        <label for="first_name">
                            <input id="name" class="field" name="first_name" type="text" placeholder="First Name">
                        </label>
                        <br>
                        <label for="last_name">
                            <input id="name" class="field" name="last_name" type="text" placeholder="Last Name">
                        </label>
                        <br>
                        <label for="username">
                            <input id="user" class="field" name="username" type="text" placeholder="Username">
                        </label>
                        <br>
                        <label for="email">
                            <input id="email" class="field" name="email" type="email" placeholder="Your email">
                        </label>
                        <br>
                        <label for="password">
                            <input id="lock" class="field" name="password" type="password" placeholder="Password">
                        </label>    
                    </fieldset>

                    <fieldset>
                        <input type="submit" name="submit" id="login"  value="submit">
                    </fieldset> 
                </form>

和css是：

#name{
    background:url(images/lock.png);
    background-size:190px 150px;
    background-position: -50px -20px;
    background-repeat: no-repeat;
    width:300%;
    height:300%;
    text-indent:90px;

}

#name:focus{
    background:url(images/lock.png);
    background-size:190px 150px;
    background-position: -50px -20px;
    background-repeat: no-repeat;
    width:300%;
    height:300%;
    text-indent:90px;
}


#user{
    background-image:url(images/username3.png);
    background-size:190px 150px;
    background-position: -50px -20px;
    background-repeat: no-repeat;
    width:300%;
    height:300%;
    text-indent:90px;

}

#user:focus{
    background-image:url(images/userrname4.png);
    background-size:190px 150px;
    background-position: -50px -20px;
    background-repeat: no-repeat;
    width:300%;
    height:300%;
    text-indent:90px;

}

#lock{
    background:url("images/lock.png") no-repeat scroll 2px 4px ;
    background-size:190px 150px;
    background-position: -50px -20px;
    background-repeat: no-repeat;
    text-indent:90px;
    width:300%;
    height:300%;

}