无法正确定位背景图像

时间:2017-03-18 17:11:43

标签: html css background-image

我试图定位背景图像,使其保持与屏幕大小成比例/自适应,而不是浮动到导航栏。我使用的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%; 

}

这是一个小提琴background-image

3 个答案:

答案 0 :(得分:2)

更新top 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

答案 1 :(得分:1)

类似于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;
}

如果您希望徽章在所有情况下都完全可见。即使浏览器窗口非常狭窄,您也必须更改图像。仅在透明背景上使用徽章创建png图像,并在css中添加蓝色作为背景颜色。

答案 2 :(得分:1)

1。)宽度和边距与固定位置及其上/左/右/下参数相矛盾。对于元素本身而言。

2.。)背景位置与cover大小相矛盾。 background-position:50% 50%;将背景图像的左上角放在容器的中心,这可能不是您想要的。只需删除它,只使用background-size: cover;background-attachment: fixed