Question: I've implemented one easy-peasy code which is all around the interwebz. I placed image inside textbox (`type="text"`) field but it is touching the border of the empty box. Is there a way I can move image a little bit to the right to avoid touching with the border?! I've been struggling around but couldn't find a way.

![Image is touching my border!](https://i.stack.imgur.com/Yrz1g.png) 

My CSS code is:

```
.tbl1 {
  background-image:url(images/v.png); 
  background-position:left; 
  background-repeat:no-repeat; 
  padding-left:20px;
}

input {
    background: #fff;
    display: block;
    border: 2px solid  rgba(0, 0, 0, .2);
    padding: 8px;
    font-size: 13px;
    margin: 20px auto;
    width: 600px;
    font-family: "HelveticaNeue-Light", "HelveticaNeue", Helvetica, Arial, sans-serif;

    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

input.text:focus {
    outline: none;
    border-color: #09f; 
    color: #222;
}

```

Calling procedure:

```
<input type="text" id="url" name="web" name="ws" class="tbl1" placeholder="http://example.com/" maxlength="140" />

```

Answer: 
in photoshop, just edit the image so theres a white space to the left of it. Easy padding.

But its probably best to use `background-position:15px;`
Yes. there is a way you can move image a little bit to the right to avoid touching with the border.
Please try following.

```
.tbl1 {
  background-image:url(images/v.png) no-repeat left; 
  background-position:8px; 
  padding-left:28px;
} 

```