Monday, August 20, 2012

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!!!

No comments:

Post a Comment