title: Cannot place more then one images in a container
body: <p>I'm trying to place 2 images side to side and have some text in the center of both images, but after adding the first image in <code>CSS</code> with <code>background :(url)</code> , I cannot add a second image because it just overrides the first one and I put images directly in a <code>div</code> , I cannot place text inside them.</p>
  <p>As you can see in the below <code>HTML</code> that if I put one image in <code>HTML</code> and I through <code>CSS</code>, I cannot place text over it and if I place it in the <code>CSS</code> ,they just override each other.</p>
  <p><code>HTML</code> and <code>CSS</code></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>#image{
      height: 400px;
      background-color: black;
      background: url("https://www.dizzion.com/wp-content/uploads/2017/06/Working-on-Laptop-x1200-1024x683.jpg");
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="images"&gt;
    &lt;h1&gt;affortable shit&lt;/h1&gt;
    &lt;p&gt;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quae nisi aliquid, saepe eaque ad repudiandae hic minus commodi tempore.&lt;/p&gt;
    &lt;img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt=""&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>