如何使伪元素扩展到全高？
How to make a pseudo element extend to full height?
我有一个 HTML 元素设置为全高的页面：
html{
height:100%;
position:relative;
}
我的 body 元素包含一个重复的背景图像作为伪元素：
body:before{
content: "";
border:2px solid blue;
display: block;
position:absolute;
bottom:0;
left:0;
background: url("https://website.com/uploads/background-repeat.png") repeat;
width: 100%;
height: 100%;}
在正文中，我有一个 #wrapper 元素，我的 SPA 的所有内容都在其中：
<body id="gradient">
<!-- Wrapper -->
<div id="wrapper">
<div id="header" />
<div id="content" />
<div id="footer" /> ...
</div>
但是我的 body 元素不会随着包装器的内容展开。如何让背景在用户向下滚动页面时始终显示而不是在第一次折叠时停止？
如果您将 body:before 更改为 body，图像将正常重复：
html {
height: 100%;
}
body {
display: block;
position: absolute;
bottom: 0;
left: 0;
background: url("http://via.placeholder.com/150x150") repeat;
width: 100%;
height: 100%;
}
h1,
p {
color: #333;
}
#wrapper,
#content,
#footer {
width: 100%;
}
<!-- Wrapper -->
<div id="wrapper">
<div id="header">
<h1>Background Stuff & Things</h1>
</div>
<div id="content">
<h1>Content</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
<div id="footer">
<h1>Footer</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
</div>
标准重复
您也可以为背景做一个标准的重复图像：
html {}
body {
background: url("http://via.placeholder.com/850x850") repeat;
}
h1,
p {
color: #333;
}
#wrapper,
#content,
#footer {
width: 100%;
}
<!-- Wrapper -->
<div id="wrapper">
<div id="header">
<h1>Background Stuff & Things</h1>
</div>
<div id="content">
<h1>Content</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
<div id="footer">
<h1>Footer</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
</div>
固定背景
不知道，你是想实现固定背景吗？
html {}
body {
background: url("http://via.placeholder.com/850x850") repeat;
background-attachment: fixed;
}
h1,
p {
color: #333;
}
#wrapper,
#content {
width: 100%;
}
<!-- Wrapper -->
<div id="wrapper">
<div id="header">
<h1>Background Stuff & Things</h1>
</div>
<div id="content">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
<div id="footer">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
</div>
body 未采用自动高度，因为您将其高度限制为 100%。所以只给出 min-height:100% 和 height: auto;。
你也可以直接给 background 到 body 不需要伪元素。
html {
height: 100%;
}
body{
width: 100%;
height: auto;
min-height: 100%;
background: url("https://website.com/uploads/background-repeat.png") repeat;
}
我有一个 HTML 元素设置为全高的页面：
html{
height:100%;
position:relative;
}
我的 body 元素包含一个重复的背景图像作为伪元素：
body:before{
content: "";
border:2px solid blue;
display: block;
position:absolute;
bottom:0;
left:0;
background: url("https://website.com/uploads/background-repeat.png") repeat;
width: 100%;
height: 100%;}
在正文中，我有一个 #wrapper 元素，我的 SPA 的所有内容都在其中：
<body id="gradient">
<!-- Wrapper -->
<div id="wrapper">
<div id="header" />
<div id="content" />
<div id="footer" /> ...
</div>
但是我的 body 元素不会随着包装器的内容展开。如何让背景在用户向下滚动页面时始终显示而不是在第一次折叠时停止？
如果您将 body:before 更改为 body，图像将正常重复：
html {
height: 100%;
}
body {
display: block;
position: absolute;
bottom: 0;
left: 0;
background: url("http://via.placeholder.com/150x150") repeat;
width: 100%;
height: 100%;
}
h1,
p {
color: #333;
}
#wrapper,
#content,
#footer {
width: 100%;
}
<!-- Wrapper -->
<div id="wrapper">
<div id="header">
<h1>Background Stuff & Things</h1>
</div>
<div id="content">
<h1>Content</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
<div id="footer">
<h1>Footer</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
</div>
标准重复
您也可以为背景做一个标准的重复图像：
html {}
body {
background: url("http://via.placeholder.com/850x850") repeat;
}
h1,
p {
color: #333;
}
#wrapper,
#content,
#footer {
width: 100%;
}
<!-- Wrapper -->
<div id="wrapper">
<div id="header">
<h1>Background Stuff & Things</h1>
</div>
<div id="content">
<h1>Content</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
<div id="footer">
<h1>Footer</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
</div>
固定背景
不知道，你是想实现固定背景吗？
html {}
body {
background: url("http://via.placeholder.com/850x850") repeat;
background-attachment: fixed;
}
h1,
p {
color: #333;
}
#wrapper,
#content {
width: 100%;
}
<!-- Wrapper -->
<div id="wrapper">
<div id="header">
<h1>Background Stuff & Things</h1>
</div>
<div id="content">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
<div id="footer">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porttitor quis justo vitae suscipit. Aliquam ac felis eleifend, pharetra turpis malesuada, mattis odio. Morbi semper diam id est vestibulum, non pulvinar
diam faucibus. Fusce dolor tortor, viverra eget malesuada sit amet, posuere sed tellus. Sed aliquet condimentum est, at finibus justo interdum a. Nam vel justo urna. Donec id magna non lacus finibus eleifend. Integer nunc quam, lobortis non velit
a, congue suscipit sem. Suspendisse fermentum euismod gravida. Cras sed fringilla urna. Phasellus eu lobortis nibh, at placerat urna. Sed aliquet elit felis, eget pretium dolor eleifend sed. Nulla sed facilisis odio. Vivamus molestie tristique sapien
sit amet pretium. In a condimentum mauris, a efficitur quam.</p>
<p>Pellentesque ut nulla et tellus venenatis facilisis. Suspendisse at quam ut turpis vulputate aliquet. Morbi luctus cursus malesuada. Aliquam ut lacus in quam rhoncus rhoncus. Aliquam vitae lacinia sapien. Aliquam erat lorem, bibendum ut posuere at,
faucibus in nibh. Cras lobortis risus quis scelerisque sollicitudin. Aliquam fringilla placerat tortor, ut suscipit ipsum ultrices eget. Nunc ex magna, finibus in lectus vel, placerat commodo mauris. Donec in mi et enim vehicula dictum ut ut odio.
Morbi mi lectus, eleifend eget varius et, varius at nisl. Donec vitae gravida felis. Nullam condimentum, est a porttitor aliquam, orci diam placerat risus, condimentum tempor dui felis quis purus. Donec scelerisque sollicitudin rutrum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Phasellus lobortis quam leo, ut pretium tortor gravida lacinia. Integer bibendum ut lacus ac facilisis. Sed dignissim diam dolor, ac placerat mauris efficitur nec. Vivamus eleifend, odio eget posuere bibendum, libero diam ultricies nisi, vitae ultrices
mauris augue ullamcorper justo. Praesent porttitor ultricies rutrum. Ut vel volutpat turpis, non blandit ex. Cras vulputate tincidunt eros eu iaculis.</p>
<p>Cras ullamcorper cursus erat, ac maximus augue faucibus non. Vestibulum at lectus eu massa convallis tristique. Etiam venenatis ligula a aliquam accumsan. Pellentesque ac venenatis est, sed interdum felis. Donec scelerisque porta tortor, eu ultricies
est faucibus vel. Ut sit amet libero ac mi vehicula elementum. Etiam vel pulvinar nunc, id imperdiet orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus finibus arcu eu venenatis. Morbi
viverra orci at ipsum suscipit, eu tristique arcu laoreet.</p>
<p>Cras ultrices non quam ultricies fringilla. Sed eu dolor quam. Quisque leo lorem, rhoncus a dignissim eu, sagittis vel ante. Maecenas purus purus, vestibulum sed ante eu, laoreet ultrices metus. Donec ut nulla diam. Vestibulum vestibulum feugiat ex
non viverra. Nullam nec posuere arcu. Etiam viverra fringilla sem vel malesuada. Vestibulum in ex vitae metus feugiat efficitur vel eget purus. Aenean accumsan magna dignissim maximus tristique. Cras vestibulum, turpis quis scelerisque fringilla,
metus erat varius tortor, quis vulputate erat massa et diam. Suspendisse ullamcorper mattis porttitor. Quisque mattis et lectus at pharetra. Morbi tristique arcu sit amet tellus laoreet mollis.</p>
</div>
</div>
body 未采用自动高度，因为您将其高度限制为 100%。所以只给出 min-height:100% 和 height: auto;。
你也可以直接给 background 到 body 不需要伪元素。
html {
height: 100%;
}
body{
width: 100%;
height: auto;
min-height: 100%;
background: url("https://website.com/uploads/background-repeat.png") repeat;
}