无法正确定位背景图片

Question

我正在尝试定位背景图片，使其保持 proportional/adaptive 屏幕大小，而不是浮动到导航栏中。我使用的 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%; 

}

这里是fiddlebackground-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

Answer 2

类似于 this?

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

如果您希望徽章在所有情况下都完全可见。即使浏览器 window 真的很窄，您也必须更改图像。在透明背景上仅使用徽章创建 png 图像，并在 css.

中添加蓝色作为背景色

Answer 3

1.) 宽度和边距与固定位置及其 top/left/right/bottom 参数相矛盾。对于元素本身。

2.) 背景位置与cover尺寸相矛盾。 background-position:50% 50%; 将背景图片的左上角放在容器的中心，这不是你想要的。只需删除它并仅使用 background-size: cover; 和 background-attachment: fixed

无法正确定位背景图片

unable to position background image correctly

html

css

background-image