Może tak bez kombinowania:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
.background {
float: left;
width: 300px;
height: 300px;
border: 1px solid red;
margin: 10px;
background-position: center center;
}
.cover {
background-size: cover;
}
#bg1 {
background-image: url("http://www.tapeciarnia.pl/tapety/normalne/tapeta-zimowy-poranek-nad-rzeka-w-norwegii.jpg");
}
#bg2 {
background-image: url("http://www.tapeciarnia.pl/tapety/normalne/261657_wiosna_las_wschod_slonca_kwiaty_promienie.jpg");
}
#bg3 {
background-image: url("http://www.tapeciarnia.pl/tapety/normalne/269144_las_drzewa_promienie_slonca.jpg");
}
</style>
</head>
<body>
<div id="bg1" class="background cover"></div>
<div id="bg2" class="background cover"></div>
<div id="bg3" class="background cover"></div>
<div style="clear: both;"></div>
<div id="bg1" class="background"></div>
<div id="bg2" class="background"></div>
<div id="bg3" class="background"></div>
<div style="clear: both;"></div>
</body>
</html>