HTML/CSS - How do I fill background of region to left of div that shrinks on zoom out? -

scenario

i want create spotlight in css fixes position relative parent div on user zoom level.

i want "fill" entire screen shadow can not spotlight respond zoom when apply shadow entire page.

problem

the left portion in jsfiddle container (account-settings-confirm-container-left-fill) not show shadow.

what have done far..

<div class="container account-settings-confirm-container-left-fill"> </div>   <div class="container account-settings-confirm-container">  <div class="spotlight"></div>   <div class="account-settings-confirm">         <div class="row account-settings-confirm-banner extend-full">           </div> </div> </div> 

accompanying jsfiddle created.

jsfiddle

https://jsfiddle.net/10nml3vv/

result (full screen)

https://jsfiddle.net/10nml3vv/embedded/result/

how modify code make shadow take entire page?

edit

i tried make modification left fill no avail.

.account-settings-confirm-container-left-fill{         position: absolute;         width: auto;         height: auto;         background: rgba(0, 0, 0, 0.5);     } 

bootstrap container classes have max-width values of

none, 750px, 970px, 1170px .. depending on screen size.

refer http://getbootstrap.com/css/#grid-options

you can change .container class .container-fluid

and remove

margin-left: -55px; .spotlight element. should cover it.

here fork. jsfiddle link

edit: target pseudo :before of element .spotlight , add following

.spotlight:before {   content: "";   position: absolute;   display: block;      left: -100%;   height: 100%;   width: 100%;   background: rgba(0,0,0,0.5);   } 

just note absolute positioned html. updated fiddle