.randombackground{
width:100%;
position: relative;
}
.randombackground img{
    position: absolute;  
    top: 0;  
    bottom: 0;  
    margin: auto;
min-width:100%;
}
h1.navbar-brand_ {
position: absolute;
}
.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 13%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  min-height:200px;
  height: 100%;
  width: 100%;
  overflow:hidden;

}
@media (max-width:1200px) {
.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 20%; /* of parent width */
}
.randombackground img{
    min-height:100%;
    height:500px;
}
}

@media (max-width: 620px) {
.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 30%; /* of parent width */
}
.randombackground img{
    height:400px;
}
}
@media (max-width: 500px) {
.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 40%; /* of parent width */
}
}