title: Containing a text in an oval shaped area
body: <p>I have a html page which looks like the following:</p>
  
  <p><img src="https://i.stack.imgur.com/bw2HK.png" alt="enter image description here"></p>
  
  <p>I want to display some text on the left pane, but the problem is that <strong>the text should be inside the oval shaped area only</strong>. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a <code>&lt;img&gt;</code> tag for it if it would help. One lame way is to use <code>&lt;p&gt;</code> tags with padding, but that is not an efficient way, so kindly suggest some good methods.</p>
  
  <p><strong>EDIT:</strong> <code>HTML:</code></p>
  
  <pre><code>&lt;div id="leftStage" class="rounded-corners"&gt;
    &lt;div id="questionDisp" align="center"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>CSS:</code></p>
  
  <pre><code>#leftStage {
  position: relative;
  width: 34%;
  height:86%;
  float: left;
  }
  #questionDisp {
  display:none;
  }
  </code></pre>
  
  <p><code>JS:</code> (When the appropriate function is called: )</p>
  
  <pre><code>$("#questionDisp").fadeIn(1000);
  $("#questionDisp").html(quesArr.q1);  //data read from xml
  </code></pre>
  
  <p><strong>EDIT: What I need is a div or something above the oval background, &amp; the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed</strong></p>