Padding/Margin for background images in CSS

This is the one of the small and tough problem for which I was searching the solution almost every day.

And finally I found something which pretty simple and effective.

I am using input box to show the result.

This is how we normally use to fix the bg image position in css

HTML

<input name="" type="text" />

CSS

Input {

background: url(../image.jpg) left no-repeat;

height:22px;

border:1px solid #8e8e8e;

}

Result:

Let’s try to give left padding for bg image

input {

background: url(../image.jpg) 6px 0 no-repeat;

}

Here, 2% represents x-axis of the image and 0 represents y-axis.

So here you get the left padding for your image.

This is it!!!