title: Placing an image with its default size
body: <p>I am new to Web Dev and I am currently learning HTML and CSS. I like to be sure that I can do 100% of the stuff I can before going on with the learning and I am stuck in something which may be too silly but I have been struggling for hours on this.</p>
  
  <p>What I want to do is to add a picture to a website using CSS (background-image).</p>
  
  <p>This is the code I use(I use CSS but I placed it inside HTML within  tag for the sake of the question).  </p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
         &lt;style&gt;
    .fml {
       position: relative;
        background-image: url("http://oi63.tinypic.com/z6be8.jpg");
       background-repeat: no-repeat;
        min-height: 100px;
        width: 30%;
        border: 1px solid;
       }
      .txt {
        color: white;
        position: absolute;
      bottom:0;
      left:0;
       }
         &lt;/style&gt;
        &lt;/head&gt;
        &lt;body&gt;
           &lt;div class="fml"&gt;
          &lt;p class="txt"&gt;This is a random picture&lt;/p&gt;
         &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Now as you can see, the background picture is shown only a fraction because the height is set to 100 px. But what if I want the program to detect automatically the size of the image and to extend its borders until the picture is shown on its real size? What if I don't know the size of the picture?</p>
  
  <p>EXTRA QUESTION: As you can see, even though the text position is "bottom:0, left:0" it is not on bottom left, it's a little higher, why is that? Thank you for your answers!</p>
  
  <p>PS: sorry for the indentation, I am in a hurry so I don't have time to indent the code in here properly. Thank you again for your answer!</p>