CSS - multiple background image padding

Question

I have a fiddle here...

I have multiple background images set in a <div>. However, it seems like relative positioning is all that's allowed.

Any possibility of padding these images, so they're not in the extreme corners? Simple div padding doesn't work.

.iso-container li   {
    background: #f8981d;
    background-image: url(http://webfro.gs/south/kb2/images/pdf-button.png), url(http://webfro.gs/south/kb2/images/bxw_email.png);
    background-position: bottom right, bottom left;
    background-repeat: no-repeat;
    padding-left: 10px;
    color: #FFFFFF;

Thoughts?

Answer 1

If you are OK with percentage positioning you could change your background-position to something like this:

background-position: 95% 95%, 5% 95%;

Demo Fiddle

Answer 2

You can also try the four-value syntax to give them offsets from any side if you need a little more precise control.