title: 4 pictures in every corner of the screen html css
body: <p>I'm trying to position 4 little pictures in every corner of the screen. I want something like:</p>
  
  <p><img src="https://i.stack.imgur.com/ei4rX.png" alt=""></p>
  
  <p>How can I achieve this using HTML and CSS?</p>
  
  <p>The following code displays a picture where there should be 4 little ones.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.img {
    border: 1px solid #ccc;
  }
  div.img:hover {
    border: 1px solid #777;
  }
  div.desc {
    padding: 15px;
    text-align: center;
  }
  * {
    box-sizing: border-box;
  }
  .responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
  }
  @media only screen and (max-width: 5000px) {
    .responsive {
      width: 49.99999%;
      margin: 6px 0;
    }
  }
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="responsive"&gt;
    &lt;div class="img"&gt;
      &lt;img src="animals/cat.jpg" alt="Trolltunga Norway" width="600" height="400"&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="responsive"&gt;
    &lt;div class="img"&gt;
      &lt;a target="_blank" href="animals/dog.jpg"&gt;
        &lt;img src="animals/dog.jpg" alt="Forest" width="600" height="400"&gt;
      &lt;/a&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="responsive"&gt;
    &lt;div class="img"&gt;
      &lt;a target="_blank" href="animals/monkey.jpg"&gt;
        &lt;img src="animals/monkey.jpg" alt="Northern Lights" width="600" height="400"&gt;
      &lt;/a&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="responsive"&gt;
    &lt;div class="img"&gt;
      &lt;a target="_blank" href="animals/fox.jpg"&gt;
        &lt;img src="animals/fox.jpg" alt="Mountains" width="600" height="400"&gt;
      &lt;/a&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="clearfix"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>