Divy responsywne do background image

Question

Mam następujący problem i żadne moje zabawy nie pomogły mi go rozwiązać tak by dogodzić potencjalnie wszystkim użytkownikom.

W ramach treningu tworzę prostą, webową riddle game i czasami mam ekrany z background image, gdzie jak np. klikniesz w drzwi, to niewidoczny div nałożony na te drzwi aktywuje funkcje ktora przenosi cie na następną stronę.

I wszystko jest fajnie, dopóki działam we własnej rozdzielczości. Dostosowanie się do reszty sprawia mi problem.

Wiem, że żeby to osiągnąć muszę ustawić parent container na position: relative a divy w środku na absolute. I istotnie, same divy są responsywne do containera, ale nie do background image, który przecież nie pokryje całego diva jeśli ustawiłem go na background-size: contain;

Z drugiej strony, jeśli ustawię na background-size: cover to jestem w lepszej sytuacji, ale za to niektóre ekrany mogą stracić istotne części obrazka i uniemożliwic przejście do następnego ekranu.

Obecnie wygląda to tak po ujawnieniu ukrytych divów na google chrome w rozdzielczosci 1920x1080

http://prntscr.com/e8l4iu

 

A istotne części kodu tej strony to html(bez małego interfejsu po lewej, to oddzielny div):

<div id='corridor'>
		
		<img id="corridor_d" src="css/arrowdown.png" onclick="corridor_down()">
		
		<div id="block_div" onclick="jammed.play(), lock_jammed()">
			
		</div>

		<div id="beds_div" onclick="prisonDoor.play(), beds()">
			
		</div>

		<div id="torture_div" onclick="prisonDoor.play(), torture_room()">
		
		</div>

		<div id="wooden_door">
			
		</div>
	</div>

 

a CSS

#corridor {
  /*position: relative;*/
  height: 100vh;
  width: 85%;
  float:right;
  background: url("http://i.imgur.com/jGzxGaB.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}



/*hidden divs corridor*/

#beds_div{
	display: inline-block;
	background-color: black;
	height: 370px;
	width: 50px;
	/*margin-left: 900px;
	margin-bottom: 500px;*/
	opacity: 0.7;
	position: relative;
	bottom: 120px;
	left: 135px;
}

#block_div{
	display: inline-block;
	background-color: black;
	height: 270px;
	width: 40px;
	opacity: 0.7;
	position: absolute;
	top:470px;
	left: 1215px;
}

#torture_div{
	display: inline-block;
	background-color: black;
	height: 650px;
	width: 110px;
	opacity: 0.7;
	position: absolute;
	top:340px;
	left: 1420px;
}

 

Prosze o pomoc lub jakieś wskazówki, bo już kompletnie nie wiem jak rozwiązać ten problem i powstrzymuje mnie przed dalszą pracą z projektem.