PNG on top of JPG

[Pain]

Hi there. I am trying to put a "user is online" icon on top of a picture.

 

What i've got so far is:

 

html/php

<div class="featured"><a href="user_profile.php?id=<?php echo $id2[1]; ?>"><img src="<?php echo $profile_picture2[1]; ?>" class="borders" /></a></div>

 

css

.featured {
width: 136px;
height: 136px;
background-image: url('img/featured.jpg');
float: left;
margin: 2px;
}

.borders {
border: 4px solid #D8D8D8; 
height: 128px; 
width: 128px;
}

.on {
width: 80px;
height: 80px;
background-image: url('img/on.png');
}

 

I want to put class "on" on top of the image. I've tried many things, but just keep getting nothing or distorted layout.

 

Any help pls:) Thanks!

[Jessica]

Try using position: relative.

[Drongo_III]

You want to put a background image on the profile image??

 

Maybe i've totally misunderstood.

 

You'd be better off making the parent div position:relative, then add absolute positioning to the profile pic and add the "user online" png. Then set the z-index of "user online" png to a higher value than the profile pic - that way it'll sit above the profile pic.

 

But to my knowledge you can't add a background image to an image...err if that's what you were trying to do in the first place...which you probably werent hehe.

 

 

Hi there. I am trying to put a "user is online" icon on top of a picture.

 

What i've got so far is:

 

html/php

<div class="featured"><a href="user_profile.php?id=<?php echo $id2[1]; ?>"><img src="<?php echo $profile_picture2[1]; ?>" class="borders" /></a></div>

 

css

.featured {
width: 136px;
height: 136px;
background-image: url('img/featured.jpg');
float: left;
margin: 2px;
}

.borders {
border: 4px solid #D8D8D8; 
height: 128px; 
width: 128px;
}

.on {
width: 80px;
height: 80px;
background-image: url('img/on.png');
}

 

I want to put class "on" on top of the image. I've tried many things, but just keep getting nothing or distorted layout.

 

Any help pls:) Thanks!

[Mahngiel]

You'd be better off making the parent div position:relative, then add absolute positioning to the profile pic and add the "user online" png. Then set the z-index of "user online" png to a higher value than the profile pic - that way it'll sit above the profile pic.

Yes.

But to my knowledge you can't add a background image to an image...err if that's what you were trying to do in the first place...which you probably werent hehe.

No.

[Drongo_III]

haha thanks for the commentary

 

You'd be better off making the parent div position:relative, then add absolute positioning to the profile pic and add the "user online" png. Then set the z-index of "user online" png to a higher value than the profile pic - that way it'll sit above the profile pic.

Yes.

But to my knowledge you can't add a background image to an image...err if that's what you were trying to do in the first place...which you probably werent hehe.

No.