CODEWITHSUNDEEP
htmlcss
Garcia
Garcia

Reputation: 13

How to place an image on top of another image in HTML?

check out the site wplayout.com. In home page I have a gallery. I would like to place a "premium" tag image on top of each image shown on home page gallery. Currently the premium image is shown on top right corner of the home page. how to achieve that?

so far i 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 I have 

<span class="ribbon"></span>

Thanks in advance

Upvotes: 1

Views: 3909

Answers (3)

Sameer Goyal
Sameer Goyal

Reputation: 581

i think that the position:relative has to be applied to ribbon and not the 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 this using firebug & it worked. Hope it works for you.

Upvotes: 2

Dominic
Dominic

Reputation: 3304

Make sure the div containing the 'premium' image has position: relative set on it, like so:

Markup:

<div class="my-image">
  <img src="whatevs.jpg">
  <span class="ribbon"></span>
</div>

CSS: 

.my-image {
  position: relative;
}

Divs with absolute positioning (your ribbon) are positioned relative the first parent that has position: relative, or relative to the body if no such parent exists.

Upvotes: 2

mylesagray
mylesagray

Reputation: 8879

Use the z-index selector in css

For your premium content add z-index:999; and on the image below use z-index:0;

Upvotes: 0

Related Questions