html - 无法正确定位背景图像

Question

我正在尝试定位背景图像，使其保持比例/适应屏幕尺寸，并且不会 float 到导航栏中。我使用的CSS是:

#apology{
background-image:url('http://i.imgur.com/jkXf9IE.png');
width:50%;
margin:0 auto;


background-position:50% 50%;
background-size:cover;


position:fixed;
left:10%;
top:10%;
right:10%;
bottom:10%; 

}

这是一个 fiddle background-image

Answer 1

更新顶部的css，用像素而不是百分比修复它

#apology {
    background-image: url(http://i.imgur.com/jkXf9IE.png);
    width: 50%;
    margin: 0 auto;
    background-position: 50% 50%;
    background-size: cover;
    position: fixed;
    left: 10%;
    top: 52px; //update this
    right: 10%;
    bottom: 10%;
}

正在工作 jsfiddle