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;
  }

<divclass="responsive"><divclass="img"><imgsrc="animals/cat.jpg"alt="Trolltunga Norway"width="600"height="400"><divclass="desc">Add a description of the image here</div></div></div><divclass="responsive"><divclass="img"><atarget="_blank"href="animals/dog.jpg"><imgsrc="animals/dog.jpg"alt="Forest"width="600"height="400"></a><divclass="desc">Add a description of the image here</div></div></div><divclass="responsive"><divclass="img"><atarget="_blank"href="animals/monkey.jpg"><imgsrc="animals/monkey.jpg"alt="Northern Lights"width="600"height="400"></a><divclass="desc">Add a description of the image here</div></div></div><divclass="responsive"><divclass="img"><atarget="_blank"href="animals/fox.jpg"><imgsrc="animals/fox.jpg"alt="Mountains"width="600"height="400"></a><divclass="desc">Add a description of the image here</div></div></div><divclass="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.