我这里有一个小但烦人的问题。我的页脚和背景图像在不同的分辨率下保持在页面上或放大和缩小（因为页脚被固定而背景图像位于中心）但我的其他图像似乎不在页面中，他们根据不同的分辨率或者放大和缩小来自行移动。这是我发生的代码/截图：
截图：
我对网页的看法（1920x1080）：http://gyazo.com/11c8a55c697696eb7667fdf23f903bb9
这是我的代码笔：http://codepen.io/anon/pen/JobwRB
尝试在codepen中滚动缩放，我认为你会明白我的意思。媒体查询值得一读吗？或者必须将所有东西放入容器中？
感谢您收到的任何帮助。
HTML代码：
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="footer.css" type="text/css"/>
<link rel="stylesheet" href="body.css" type="text/css"/>
</head>
<body>
<div>
<a href="#" id="javaPic" title="Java"></a>
<a href="#" id="htmlcssPic" title="HTML/CSS"></a>
<a href="#" id="javascriptPic" title="JavaScript"></a>
<a href="#" id="phpPic" title="PHP"></a>
</div>
<div id="img">
<img src="images/deets.png">
</div>
<div id="footer">
<ul id="footer_menu">
<li class="homeButton"><a href="index.html"></a></li>
<li><a href="page2.html">Profile</a>
<div class="three_column_layout">
<div class="col_3">
<p></p>
</div>
</div>
</li>
<li><a href="page2.html">Work Exp</a>
<div class="two_column_layout">
</div>
</li>
<li><a href="page2.html">Qualifications</a>
<div class="two_column_layout">
<div class="col_2">
<a class="headerLinks">Test</a>
</div>
</div>
</li>
<li class="right"><a href="#">Log Out</a></li>
</ul>
<ul id="notifications">
<li>
<a href="#" class="notificationIcons"><img src="images/twitter.png"</a>
</li>
<li>
<a href="#" class="notificationIcons"><img src="images/facebook.png"></a>
</li>
</ul>
</div>
</body>
页脚CSS：
body{
background:rgba(20,20,20,1);
}
#footer{
position:fixed;
bottom:0px;
margin:0;
padding:0;
left:0;
right:0;
width:100%;
height:40px;
font-family:Arial;
text-shadow:1px 1px 1px black;
border-top:1px solid rgba(0,0,0,1.0);
background: rgba(0,0,0,0.5);
box-shadow:inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2),
inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
#footer h2{
font-weight:normal;
font-size:14px;
text-decoration:underline;
color:#CC0000;
margin-top:10px;
margin-bottom:5px;
margin-left:10px;
}
#footer p{
color:white;
font-size:12px;
float:left;
padding:0px 10px;
margin:10px 0px;
}
#footer img{
border:none;
}
#footer li ul{
list-style:none;
padding:0px;
margin-bottom:12px;
}
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0px;
height:0px;
}
#footer .whiteBorder{
border:1px solid white;
}
#footer .img_left{
float:left;
margin-right:10px;
width:40px;
}
#footer .black_box{
background:rgba(0,0,0,0.4);
padding:5px;
margin-bottom:5px;
border-radius:5px;
}
#footer #notifications{
float:right;
width:auto;
margin:5px 15px 0px;
padding:0px;
overflow:hidden;
}
#footer #notifications li{
margin-right:12px;
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
}
#footer #notifications li:hover{
margin-top:-1px;
}
#a .notificationIcons span{
display:none;
font-size:12px;
color:white;
bottom:45px;
width:150px;
position:absolute;
border:1px solid #333333;
padding:5px;
margin-left:-70px;
background:rgba(0,0,0,0.4)
}
#a .notificationIcons:hover span{
display:block;
}
#footer_menu{
margin:0px;
padding:0px;
width:auto;
}
#footer_menu li{
list-style:none;
text-align:center;
width:75px;
float:left;
font-size:12px;
padding:12px 14px 14px 14px;
border-right:1px solid rgba(0,0,0,0.4);
background:rgba(0,0,0,0.1);
}
#footer_menu li:hover{
background:rgba(0,0,0,0.3);
}
#footer_menu li a{
display:block;
color:#CCCCCC;
text-decoration:none;
}
#footer_menu li a:hover{
color:white;
}
#footer_menu .homeButton{
padding:5px 8px 0px 5px;
border:none;
background:none;
}
#footer_menu .homeButton a{
background:url("C:/Users/Charlie/Desktop/CV Website/images/greyhouse1.png") top left no-repeat;
width:36px;
height:30px;
}
#footer_menu .homeButton:hover{
background:none;
}
#footer_menu .homeButton a:hover{
background:url("C:/Users/Charlie/Desktop/CV Website/images/whitehouse2.png") top left no-repeat;
}
/*Programs menu drop-up box*/
#footer_menu li ul.dropup{
display:none;
}
#footer_menu li:hover ul.dropup{
display:block;
position:absolute;
margin: 0 0 0 -15px;
bottom:40px;
border:1px solid #111111;
border-bottom:none;
background:rgba(0,0,0,0.5);
}
#foot_menu li:hover li{
float:none;
background:none;
border:none;
border-bottom:1px solid #111111;
padding:12px 10px 12px 10px;
}
/*Drop up default links*/
#footer_menu li:hover a{
color:#aaaaaa;
}
#footer_menu li:hover a:hover{
color:white;
}
/*Header links*/
.headerLinks {
display:none !important;
}
#footer_menu li:hover a.headerLinks{
font-size:14px;
text-decoration:underline;
margin-bottom:5px;
color:#CC0000;
margin-top:10px;
margin-left:10px;
display:block !important;
}
#footer_menu li:hover a.headerLinks:hover{
color:white;
cursor:pointer;
}
/*List links*/
#footer_menu li:hover a.listLinks{
font-size:12px;
color:#aaaaaa;
margin-left:10px;
}
#footer_menu li:hover a.listLinks:hover{
color:white;
cursor:pointer;
}
#footer_menu .right{
float:right;
right:0px;
margin-right:2px;
border-right:none;
border-left:1px solid rgba(0,0,0,0.3);
}
/*Layouts*/
#footer .one_column_layout,
#footer .two_column_layout,
#footer .three-column_layout,{
margin:4px;
position:absolute;
padding-bottom:15px;
display:none;
text-align:left;
}
/*Width of each layout*/
#footer .one_column_layout{width:140px;}
#footer .two_column_layout{width:280px;}
#footer .three_column_layout{width:420px;}
/*Display Dropup menus on hover */
#footer_menu li:hover .one_column_layout,
#footer_menu li:hover .two_column_layout,
#footer_menu li:hover .three_column_layout{
display:block;
position:absolute;
text-align:left;
margin:0 0 0 -15px;
bottom:40px;
background:rgba(0,0,0,0.5);
}
#footer.col_1,
#footer.col_2,
#footer.col_3{
display:block;
float:left;
position:relative;
margin-left:5px;
margin-right:5px;
}
#footer.col_1{width:130px;}
#footer.col_2{width:270px;}
#footer.col_3{width:410px;}
Body CSS：
body {
background-image:url('C:/Users/Charlie/Desktop/CV Website/images/background1.png');
box-shadow:5px 5px 2px;
background-repeat: repeat-y;
background-attachment:fixed;
background-position:center;
max-width:1080px;
}
#javaPic {
width:366px;
height:236px;
display:block;
border:1px solid white;
background:transparent url('C:/Users/Charlie/Desktop/CV Website/images/java.png');
position:fixed;
top:5%;
left:28.8%;
max-width:100%;
}
#javaPic:hover {
background-image: url('C:/Users/Charlie/Desktop/CV Website/images/java2.png');
}
#htmlcssPic {
width:366px;
height:236px;
display:block;
border:1px solid white;
background:transparent url('C:/Users/Charlie/Desktop/CV Website/images/htmlcss.png');
position:fixed;
top:5%;
right:28.8%;
max-width:100%;
}
#htmlcssPic:hover {
background-image: url('C:/Users/Charlie/Desktop/CV Website/images/htmlcss2.png');
}
#javascriptPic {
width:366px;
height:236px;
display:block;
border:1px solid white;
background:transparent url('C:/Users/Charlie/Desktop/CV Website/images/javascript.png');
position:fixed;
top:35%;
left:28.8%;
max-width:100%;
}
#javascriptPic:hover {
background-image: url('C:/Users/Charlie/Desktop/CV Website/images/javascript2.png');
}
#phpPic {
width:366px;
height:236px;
display:block;
border:1px solid white;
background:transparent url('C:/Users/Charlie/Desktop/CV Website/images/php.png');
position:fixed;
top:35%;
right:28.8%;
max-width:100%;
}
#phpPic:hover {
background-image: url('C:/Users/Charlie/Desktop/CV Website/images/php2.png');
}
#img {
position:fixed;
top:0.5%;
left:28.8%;
display:block;
max-width:100%;
}