css - How can I use a background image instead of the IMG tag in html? -
i have following html many of these kinds of links:
<a class="button" id="menu"> <img width="16" height="16" src="/images/control-double.png"> </a>
i created sprite these images combined using
but when @ seems it's background gives example:
.sprite-control-double{ background-position: 0 -396px; width: 16px; height: 16px; } #container li { background: url(csg-4febd28fe3aa3.png) no-repeat top left; }
how can use sprite positioning image instead of single image?
if use "sprite" technique, don't need img
elements within anchors:
a.button { background-color: transparent; background-image: url(/images/control-double.png); background-position: 0 -396px; background-repeat: no-repeat; height: 16px; width: 16px; }
i added background-color
style because in browsers rendering engine not show background image if there no background color.
Comments
Post a Comment