Small CSS image not displayed correctly -
i'm having problem displaying small image using css. i'm trying show icon sized picture (the picture has few pixel border isn't edge edge) image isn't centered when it's displayed , part of being hidden right , bottom shadows of surrounding box. of shadows think image small, shadows of box can't ignored in sizing. here's css. ideas?
.delete_button { background: url('trash_can.png'); background-repeat: no-repeat; width: 20px; height: 24px; display: inline; }
try this, adjusting background-position values until image positioned correctly:
.delete_button { background: url('trash_can.png'); background-repeat: no-repeat; width: 20px; height: 24px; display: inline; background-position : -3px -4px; }
expanding on little further, might want try add small images 1 icon image in matrix style. can select image want using width, height , background-position. allow icons loaded @ once single file, reducing internet traffic. when "new" icon needed, cached , available.
background-image: url("icons.png"); background-position: 30px 40px; /* use these values select small image contained in large image */ background-repeat : repeat; width : 20px; /* or large icon */ height : 24px; /* or large icon */
Comments
Post a Comment