title: Adding text to an image banner
body: <p>I know this question was asked here multiple times however nothing works for me. I am doing my first independent front page for one of the Codecademy exercises and I am not really fluent in coding yet. Maybe I missed something so I will paste my codes here.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {
      margin-left: 0.5%;
      margin-right: 0.5%;
      margin-bottom: 0.5%;
      margin-top: 2%;
  }
  
  img {
       
     width: 100%;
     height: 120px;
     object-fit: cover;
     position: relative;
     
  }
  
   h2 {
  
    font-family: Helvetica, sans-serif;
     font-size: 100px;
     font-weight: bold;
     color: khaki;
     position: absolute;
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Dasmoto's Arts &amp; Crafts&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="banner"&gt;
  &lt;img class="background" alt="banner_html" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg"&gt;
  &lt;div class="companys_name"&gt;
  &lt;h2&gt;Dasmoto's Arts &amp; Crafts&lt;/h2&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>