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

我看到了很多类似的问题，但找不到修复程序。
打开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 { \t 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> 
 
\t \t \t <div id="divFooter"><p>All Rights Reserved. Blabla® 2015</p></div> 
 
     </div> 
 
\t </div> 
 
</body> 
 
</html>

我试图背景图像移动到pageWrap DIV作为有人建议。
它解决了垂直滚动问题，但水平创建了一个类似的问题：
当窗口太窄而向左滚动时，图像在右侧被切断。

任何真正的解决方案？

来源

2015-12-17 Gil

您已定义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; 
}

来源

2015-12-17 14:23:23

尝试这些背景样式：

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

来源

2015-12-17 14:31:05 Chris

由于重复梯度看起来并不那么好，我猜你只是想这样的背景下alwas覆盖你的整个视口，而不是与它滚动？这将通过no-repeat和cover完成，如下所示：

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

来源

2015-12-17 14:41:57 Johannes

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

回答

相关问题