Padding on background image - html

Question

I don't know if that is a best practice, but I used a background to put some kind of "ok icon" on a div.
My problem is that the background is setted to left and I can't put a padding there on the left side of the icon.
<div id="martu">
<div class="text">
dummy text dummy text dummy text dummy text dummy text
</div>
</div>
CSS
#martu {
background: url('image') no-repeat scroll 0px 8px #FFB9D9;
padding: 5px 5px 5px 10px;
margin-left: 5px;
}
.text { font-size:17px; padding-left:20px;}
Fiddle: http://jsfiddle.net/9up0kmou/
PS. I know that an option would be to put the image direct on that div, but my dilema is that if background images support paddings or margins.

Answer 1

You can use the background-position CSS property to adjust the location of your background image on your div, for example:
#martu {
background-position:20px 20px; // where the values are x & y coordinates from the original default position
}
But no, short of actually adding whitespace to the image in an image editor (not a good idea, it would add unnecessary size to the file), there's no way of adding background-image-padding.
See this JSFiddle, where I have arbitrarily placed the tick icon in the middle of the element using background-position.
It's then a simple matter of adjusting the div padding to make sure the text doesn't overlap the image.

Answer 2

I'd probably do something like this myself. Using the pseudo-elements ::before and ::after is brilliant for placing icons and other things. That way, you get clean code, and you'd need less wrapping elements.
#martu::before {
content: url("http://findicons.com/files/icons/2015/24x24_free_application/24/ok.png");
float: left;
margin-right: 10px;
}

Answer 3

Try this: http://jsfiddle.net/87obhb57/5/
Long story short: you can't have padding on the background image, so the trick here is to set up a background-color on the outer div that gives you the block appearance; setting up a padding on it that will provide the effect you are looking for.
#martu {
padding: 5px;
background-color: #FFB9D9;
}
And finally, setting the background-image of the inner div to what you want plus a padding-left that is big enough as to ensure that the text and the image won't overlap.
#martu div.text {
background-image: url('something');
background-repeat: no-repeat;
padding-left:34px;
}