4 Pictures In Every Corner Of The Screen Html Css

I'm trying to position 4 little pictures in every corner of the screen. I want something like: How can I achieve this using HTML and CSS? The following code displays a picture whe

Solution 1:

You may use flex, margin(auto), order and a pseudo element to split the four elements to build your basic layout.

example below that puts four boxes to the four corners, they can be filled with anything and content styled anyways.

body {
  display:flex;
  flex-flow:row wrap;
  margin:0;
  height:100vh;
  }
/* body:after 
   actually your code gives a container for this */
  .clearfix {
  /*content:'';
  display:block;*/
  width:100%;
  order:1;
  }
.responsive {
  border:solid;
  margin:0;
  }
.responsive:nth-child(1) {
  margin-bottom:auto;
  margin-right:auto;
  order:0;
  }
.responsive:nth-child(2) {
  margin-bottom:auto;
  margin-left:auto;
  order:0;
  }

.responsive:nth-child(3) {
  margin-top:auto;
  margin-right:auto;
  order:2;
  }
.responsive:nth-child(4) {
  margin-top:auto;
  margin-left:auto;
  order:2;
  }

<div class="responsive">
  <div class="img">
    <img src="animals/cat.jpg" alt="Trolltunga Norway" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="animals/dog.jpg">
      <img src="animals/dog.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="animals/monkey.jpg">
      <img src="animals/monkey.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="animals/fox.jpg">
      <img src="animals/fox.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="clearfix"></div>

Solution 2:

Here you go: jsfiddle.net/hu7f9d1L.

Screenshoot:

The idea behind it is we're using an element which will contain all the children/corner, and by using position: absolute, they'll stay on the corner. Use position: fixed if needed; probably this way you needn't use the ul element and change li to div.

Try to resize the window/iframe, and you'll see the div elements stay on their corresponding corner.