CODEWITHSUNDEEP
htmlcss
Salman A. Kagzi
Salman A. Kagzi

Reputation: 4053

Overlaying text on the upper right corner of a background image

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?

Upvotes: 0

Views: 2254

Answers (2)

Lowkase
Lowkase

Reputation: 5699

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; }

Upvotes: 0

Derk Arts
Derk Arts

Reputation: 3460

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.

Upvotes: 2

Related Questions