title: CSS/HTML : Putting up a text label on my image
body: <p>I want to put a small text label on the image. Can someone help me out with that ?</p>
  <p>Putting the image in the div's background and writing on it is an option but as I am working on a dynamic project, I need to keep the css static</p>
  <p>Here is what I have tried :</p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;div class=&quot;image&quot;&gt;
    &lt;p class=&quot;text&quot;&gt;Category&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre><code>.image{
   height:40%;
   width:100%;
   text-align:center;
   padding-top:2px;
   background-image:url(Lighthouse.jpg);
   background-size:100% auto;
   }
  </code></pre>
  <p>Using this I have created something like this : <img src="https://i.stack.imgur.com/pI5Bc.jpg" alt="Image with the label" /></p>
  <p>Now, as I am going to use Django, I don't want the image to be in css. I want to place it in my html file.</p>