css - How to place an image on top of another image in HTML? -
check out site wplayout.com. in home page have gallery. place "premium" tag image on top of each image shown on home page gallery. premium image shown on top right corner of home page. how achieve that?
so far have
.ribbon { background: url("images/premium.png") no-repeat top right; width: 100px; height: 102px; overflow: hidden; /*text-indent: -9000px;*/ position: absolute; top: -3px; right: -3px; z-index:500; display: block; }
and in html have
<span class="ribbon"></span>
thanks in advance
i think position:relative has applied ribbon , not container div. try putting
.ribbon { background: url("images/premium.png") no-repeat top right; width: 100px; height: 102px; overflow: hidden; /*text-indent: -9000px;*/ position: relative; /*changed*/ right: -204px; /*changed*/ top: -230px; /*changed*/ z-index:500; display: block; }
tried using firebug & worked. hope works you.
Comments
Post a Comment