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


Tags: html,css,twitter-bootstrap

Problem :

Scenario

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.

Problem

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">
          </div>
</div>
</div>

Accompanying jsfiddle I created.

jsFiddle

https://jsfiddle.net/10nmL3vv/

Result (Full Screen)

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

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

EDIT

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

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


Solution :

Bootstrap container classes have max-width values of

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

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

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


    CSS Howto..

    Page not displaying, error not shown in console?

    How to load user CSS in a WebKit WebView using PyObjC?

    I'm acquiring a VARCHAR variable through php, and want to show it using HTML/CSS. How do I auto format it so that it isn't one long sentence

    How do I align a dropdown menu below a
    ?

    How to dynamically change width of Div1 inside a scrollable Div2 to Div2's width

    How to add Active states and icons in wordpress wp_nav_menu()

    CSS: How can I hide a class which has no other class or ID?

    How to cancel an upstream CSS declaration?

    How to make images inside a box responsive CSS

    Click radio button then show submit button

    How to make child span collapse with parent

    how to style simple_form with material design or custom css

    How to color my sidebars after centering my website

    how to override the specific style of spans in a div [span in a span ] using css or jquery?

    How to host html files like css and javascript files

    How to create a white border circle having white exclamation mark inside a box having a yellow background in html/css?

    How to link external CSS stylesheets on a Chromebook

    How should I escape image URLs for CSS?

    How to Decrease Image Brightness in CSS

    How can I replace text value to star

    How Do I Add Colgroup Tag to ASP:Datagrid Control?

    How do I make my CSS link up to files in different directories

    How to make floated columns stretch to fill container vertically?

    How can I center a figure with caption?

    how to add string to the class javascript(jquery)

    How to show something only when user prints?

    How to select multiple elements using CSS

    How to remove captcha image and it's textbox using css?

    Show or hide div based on selected value

    How do I make a hover over only take up a portion of an image as seen on gamlinwhiskeyhouse.com? [closed]