Issue when zooming on web page

Question

When I zoom in and out of my page the elements get weird.

Everything works but a container div (which is a color overlay over the image background). When you zoom in, or you go to mobile the div does not continue to the bottom of the page like it should. Instead, it shows the background image at the bottom without the image overlay.

Code:

#container {
  height:100%;
  width:100%;
  position: relative;
  background-color: rgba(0,0,0,.5);
  position: fixed;
}

body {
  background-image: url(../img/d2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

HTML:

<div id="container">
    <div class="block">
         Content
    </div>       
</div>

I already tried the 100% height property on the overlay, and it didn't work. This is particularly an issue with mobile as well.

Answer 1

问题可能出在您执行此操作的方式上，css将容器显示为高度和宽度为100％，但是（取决于您对html的结构方式），容器只会占到100％浏览器窗口，而不是网页本身。

Answer 2

I think fixing your CSS as Oscar suggested is a good starting point. Making that change, it seems like things are working correctly, but I'm a bit unclear on the issue.

#container {
  height:100%;
  width:100%;
  position: relative;
  background-color: rgba(0,0,0,.5);
  position: fixed;
}

body {
  background-image: url('http://www.wallpick.com/wp-content/uploads/2013/11/Smokey-Abstract-Wallpaper-Wallpaper-HD.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

JSFiddle