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..

    How can I place html text on top of a canvas flot chart?

    How to change css property using jquery with this code

    How to get color property from CSS with jQuery?

    How to only get the 'box-shadow-right' that cuts off when you reach a border?

    How to isolate CSS rules inside a div?

    How can I :hover over different links in one line while getting the spacing correct?

    How to make angled borders for tables.

    Javascript: Hover over Issues & How can I structure the html efficiently?

    With three divs, how to make one float to the right?

    How do i make div go under another div making columns

    How can I center vertically a div with position absolute and hight = 100px on another div with position relative but with not standard height

    How can I use themeroller'ed styles in “regular” parts of a page?

    How to align text under image using HTML/CSS?

    How to create CSS styled dom element inside Google Maps InfoWindow?

    How to concatenate XHTML files in Java resolving any possible CSS conflicts?

    How to mark search phrase in syntax highlighted markdown code?

    How do I get text in my html page to display features using the css stylesheet?

    How to apply css to buttons inside gridview

    How to keep all the parent except the first LI highlighted when the sub LI is hovered over

    CSS: How to prevent focus from breaking absolute position in overflow:hidden wrapper

    Using CSS, how do I move a DIV to the left of the centre position?

    how to hide and show a div that is inside of a form using only javascript and css

    How to set div using Z-index and fix css

    How to center icons in div consistently? [duplicate]

    How does Matt Haughey's blog insert rosettes in each post title? [closed]

    How to link my css, js and image file link in django

    How to style div's so that they don't stack right on top of each other?

    How to resize & move css divisions at same time?

    How to make css notifications without jQuery? [closed]

    How to hide repeated content from search engines with CSS?