How to achieve the following design in css in jquery mobile

Tags: css

Problem :

![I want to achieve the following red circle through css. I am using jquery mobile with angular js.My code is as below.

<div data-role="page" id="p2">
<div class="ui-bar ui-bar-d "data-role="header"  >
    <a href="" data-role="button" class="ui-btn-left">Chat</a>
    <h1> contacts </h1>
    <a href="" class="ui-btn-right">Photos</a>
</div >
<div data-role="content" data-position="center">
<div ng-controller="TalkCtl">
<ul >
  Search:
  <input type="search"  ng-model="searchText"> 
    <li ng-repeat="talk in talks | filter:searchText">
      {{talk.name}} </br> {{talk.text}} 
    </li>
  </ul>

</div>
</div>

IMAGE SNAPSHOT

---

Solution :

This can be easily done using css background-image property, coupled with positioning and z-indexing.