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

Popular posts from this blog

android - getbluetoothservice() called with no bluetoothmanagercallback -

sql - ASP.NET SqlDataSource, like on SelectCommand -

ios - Undefined symbols for architecture armv7: "_OBJC_CLASS_$_SSZipArchive" -