Overlaying text on the upper right corner of a background image

Question

I am wondering how is it possible to achieve notification count as we see in linked (as shown in image below)

enter image description here

I have tried implementing a similar solutions, using a Span which has a background image and then using tag along with it.

Roughly,

<span class="message-icon" title="Unread Message" style="display: inline-block"></span><span style="background-color: red"><sup><b>5</b></sup></span>

this is no where near to what is there on linkedin's site.

Is there a cooked solution already available for it? Or any Ideas how it can be achieved?

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

Take a look at this: http://jsfiddle.net/D3VVv/1/ From this post: How can i overlay an 10x10px image on top of another image?

If you make the div that contains the message icon as big as the message icon + the notification icon, then you can position the notification icon in the top right corner of that div using absolute positioning. As is shown in the fiddle.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 08 '13 at 14:04

Derk Arts

3,432
2
18
36

I want to overlay text on an image. Not an image on an image. – Salman A. Kagzi Mar 08 '13 at 14:36
Please disregard my above comments and thanks for that example. I got it working using that. Thanks. – Salman A. Kagzi Mar 08 '13 at 14:40

score 0 · Answer 2 · answered Mar 08 '13 at 14:05

0

There are a few ways, here is an example of absolute positioning:

http://jsfiddle.net/e2Zs4/

HTML

<div class="con">

<img src="http://www.pictures-of-kittens-and-cats.com/images/cute-kitten-pictures-002-small.jpg" />

<img class ="number" src="http://www.privatefly.com/export/PrivateFly/.content/images/services/red_numbers_4.gif " />

</div>

CSS

.con { width:100px; height:100px; position:relative; }
.number { position:absolute; top:10px; right:10px; }

answered Mar 08 '13 at 14:05

Lowkase

5,631
2
30
48

Ok the cat is nice, but that example is exactly the same as in the question i refered to, maybe we should file this question as duplicate... – Derk Arts Mar 08 '13 at 14:07
@saratis, sorry mate, didn't see your post until I had posted. – Lowkase Mar 08 '13 at 14:08

Overlaying text on the upper right corner of a background image

2 Answers2