我想让我的图像保持静态，所以当我们移动屏幕时它不会改变位置？

Question

我想让我的网站能够在调整窗口大小时滚动。它已经垂直固定，但是当我水平移动时，我的元素的位置会发生变化。 I want to be able to scroll down when i resize my window screen like this.

But when I resize my windows horizontally my div icon become smaller and the position i changed.

这是我的背景代码。

html { 
  background: url(images/background-photo.jpg) no-repeat; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color:#245528;

}

这是我的div容器代码的CSS。

#page-wrap { width: 50%; margin: 1% auto; padding:1%; position: fixed; }
#fixed { margin-left: 33%;margin-top:8% ; position: fixed; }
#fixed1 { margin-left: 34%;margin-top:13% ;position: fixed; }
#fixed2 { margin-left: 34%;margin-top:19%; position: fixed;}
#fixed3 { margin-left: 27%; margin-top:40% ; position: fixed;}
#fixed4 { margin-left: 27%; margin-top:2% ; position: fixed;}`

以下是我写div的方法。

 <div id="page-wrap">
       <div id="fixed4">
                <a href="contactX.html"><img src="images/contact.png" class="img-responsive" alt="icon 01" width=35%></a>                    
            </div>
            <div id="fixed">
            <a href="#"><img src="images/news.png" class="img-responsive" alt="icon 01" width=35%></a>
            </div>

            <div id="fixed1">
            <a href="#"><img src="images/success.png" class="img-responsive" alt="icon 01" width=35% ></a>
            </div>

            <div id="fixed2">
            <a href="slide.html"><img src="images/product.png" class="img-responsive" alt="icon 01" width=35%></a>
            </div>

            <div id="fixed3">
            <a href="aboutus.html"><img src="images/company_profile.png" class="img-responsive" alt="icon 01" width=35%></a>
            </div>