Vahe Vahe - 1 month ago 4
CSS Question

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


I want to create a spotlight in css that fixes position relative to the parent div on any user zoom level.

I want to "fill" the entire screen with the shadow but I can not get the spotlight to respond to zoom when I apply the shadow to the entire page.


The left portion in my jsfiddle container (account-settings-confirm-container-left-fill) does not show a shadow.

What I have done so 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">

Accompanying jsfiddle I created.


Result (Full Screen)

How do I modify my code to make the shadow take up the entire page?


I tried to make this modification to the left fill to no avail.

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 the screen size.


You can change the .container class to .container-fluid

and remove

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

Here is a fork. Jsfiddle Link

Edit: You could target the pseudo :before of the element .spotlight and add the following

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

Just note that it will be absolute positioned to html. Updated Fiddle