Question

我看到了很多类似的问题，但找不到修复方法打开this sample并调整浏览器大小以缩短其身高比主div高，~400像素。向下滚动时，附着在身体上的背景图像被切断：

代码：

html { height: 100%; color: white; }
body { height:100%; padding: 0; margin: 0; background:url(bg.jpg) repeat-x; background-position: bottom;   background-size: contain; }
/*#pageWrap {	background:url(bg.jpg) repeat-x;}*/
#page { height:100%; }
#divHeader {  width:100%; height:115px; }
#divMain { width:600px; height:400px; border: solid 1px brown; }

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="pageWrap">
        <div id="page">
            <div id="divHeader">Header</div>
            <div id="divMain">Main</div>
			<div id="divFooter"><p>All Rights Reserved. Blabla® 2015</p></div>
        </div>
	</div>
</body>
</html>

我尝试将背景图像移动到pageWrap div，如有人建议的那样它解决了垂直滚动问题，但水平地产生了类似的问题：
当窗口太窄而向左滚动时，图像会在右侧被切断。

任何真正的解决方案？

Answer 1

您已定义repeat-x值，然后背景仅在X轴（水平）重复。

为了解决这个问题，您有两种不同的解决方案可用于两种不同的目的。

您可以将repeat值设置为在X和Y轴上重复，但这有问题，因为您的背景是渐变，如果您在Y轴重复它，则视觉效果会很差。

另一种解决方案（在我看来是最好的解决方案）是定义背景涵盖整个元素。这可以通过属性background-size: cover来实现。

改变是：

 body {
    background:url(bg.jpg) repeat-x; 
    background-size: cover;
 }

告诉我这是否能解决您的问题。

存在具有background-attachment属性的另一个解决方案。它可以定义为fixed值，滚动条不会移动背景。

 body {
    background:url(bg.jpg) repeat-x; 
    background-attachment: fixed;
 }

Answer 2

尝试以下背景样式：

background: url(bg.jpg);
background-position: 100% 100%;
background-size: cover;

Answer 3

由于重复渐变看起来并不那么好，我猜你只是希望背景覆盖整个视口而不是滚动它？这可以通过no-repeat和cover完成，如下所示：

body { 
  height:100%; 
  padding: 0; 
  margin: 0; 
  background:url(bg.jpg) no-repeat fixed; 
  background-position: bottom;
  background-size: cover; 
}

滚动视口时，背景图像在底部或右侧被截断

3 个答案: