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

【问题标题】：Background image is cut off at bottom or right when scrolling viewport滚动视口时，背景图像在底部或右侧被切断
【发布时间】：2015-12-17 14:16:19
【问题描述】：

我看到了很多类似的问题，但找不到解决方法。
打开 this sample 并调整浏览器大小以缩短其高度
比主 div 高度，约 400 像素。向下滚动时，附在 body 上的背景图片被截断：

代码：

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。
它解决了垂直滚动问题，但在水平方向上产生了类似的问题：
当窗口太窄并且向左滚动时，图像在右侧被截断。

任何真正的解决方案？

【问题讨论】：

标签： html css

【解决方案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;
 }

【讨论】：

【解决方案2】：

试试这些背景样式：

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

【讨论】：

【解决方案3】：

由于重复渐变看起来不太好，我猜您只是希望背景始终覆盖您的整个视口而不随其滚动？这将通过no-repeat 和cover 完成，如下所示：

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

【讨论】：