Question

我有一张2000px宽的背景图片。它采用以下方式准备：内容为1000px，左侧和右侧为500px，用于高分辨率显示器的边距。

我希望它以每个决议为中心。

当我尝试使用bg {background:url(bg.jpg) no-repeat center top fixed; }时，图像已正确居中，但显然不会滚动。

所以我用fixed取代scroll： bg {background:url(bg.jpg) no-repeat center top scroll; }但是图片没有居中 - 它从左上角开始显示，因此在较小的分辨率下，您可以看到左边距，这不应该是可见的。

以下是jsfiddle.net的示例。使用background-attachment值scroll / fixed进行游戏并尝试缩小结果窗口的大小，您希望了解我的意思。

你能帮我解决这个问题吗？

Answer 1

尝试使用background-attachment属性，如下所示

background-attachment:scroll;

Answer 2

使用媒体查询。这样的事情。

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {

#left-margin-div {
width:500px;
height:1700px; /*or whatever your height is*/
background-image:url('yourimage.jpg');
position:absolute;
left:-500px;
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

背景附件滚动与固定

2 个答案: