Question

我有这样的背景：

background: radial-gradient(ellipse farthest-side at 10% 0,
        rgba(74, 121, 147, 0.89),
        rgba(204, 204, 204, 0.85) 60%,
        rgba(185, 135, 131, 0.87) 120%)
        repeat scroll 0 0,
        url('../img/bgnoise.png') repeat scroll 0 0 rgba(0, 0, 0, 0);

像魅力一样工作，但当我调整浏览器窗口的大小以便有一个水平滚动条时，背景开始在窗口的右边缘和左边缘重复。是否可以将此背景设置为整页而不是当前视图区域？

修改

忘记提及，抱歉：它适用于body-tag。这是整个身体的css：

body {
    min-width: 1000px;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    background: radial-gradient(ellipse farthest-side at 10% 0,
        rgba(74, 121, 147, 0.89),
        rgba(204, 204, 204, 0.85) 60%,
        rgba(185, 135, 131, 0.87) 120%)
        repeat scroll 0 0,
        url('../img/bgnoise.png') repeat scroll 0 0 rgba(0, 0, 0, 0);
}

Answer 1

您可以在样式表中添加以下代码段。

@media only screen and (max-width: 999px) {
body{min-width:inherit;}
}

Answer 2

尝试使用以下代码段。

background-repeat: no-repeat;

在整个页面上重复背景，而不仅仅是视图区域

2 个答案: