HTML设置纵向重复背景图仅匹配文本高度不无限延伸咨询

• 你将背景图绑定在了body元素上，body的高度默认会适配整个浏览器视口，只要视口/页面高度超过歌词内容高度，背景就会持续向下重复
• 你额外给body设置了position:absolute属性，会进一步导致body高度计算异常，放大背景无限延伸的问题

1. 修改HTML结构，新增歌词专属容器 #

把所有歌词相关内容（h1标题、所有p标签的歌词）套在一个专属容器内，背景图绑定在这个容器上，容器高度会完全跟随歌词内容长度自动适配。
修改后的body部分代码示例：

<body>
  <!-- 新增歌词容器 -->
  <div class="lyrics-wrapper">
    <h1><span>August</span></h1>
    
    <p>Salt air, and the rust on your door<br>
    I never needed anything more<br>
    Whispers of "Are you sure?"<br>
    "Never have I ever before"</p>
    <!-- 剩余所有歌词p标签都放在这个容器内 -->
    <p>For the hope of it all<br>
    For the hope of it all<br>
    (For the hope of it all)<br>
    (For the hope of it all)</p>
  </div>
  <!-- 后续要添加的其他内容直接写在容器外即可 -->

  <!-- 顺便修正原有拼写错误：javascipt → javascript -->
  <script type="text/javascript" src="custom.js"></script>
</body>

2. 调整CSS样式 #

首先修改外部CSS文件mihojadeestilosTSlyrics.css： #

body{
  /* 移除会导致高度异常的position:absolute属性 */
  text-align:center;
  padding:20px;
  margin: 0;
}

然后修改HTML内的style标签内容，把背景从body移到歌词容器： #

<style>
  .lyrics-wrapper {
    width: 90%;
    margin: 0 auto;
    /* 背景图设置保留你原来的参数 */
    background:url("../imagenes/augustphotos.jpg");
    background-repeat:repeat-y;
    background-position:95% 0%;
    /* 右侧加内边距避免歌词压到背景图，数值可按需调整 */
    padding-right: 80px;
    box-sizing: border-box;
  }
</style>

调整后背景图只会在歌词容器的范围内纵向重复，到歌词底部就会自动停止，不会继续向下延伸，后续添加其他内容也不会和上方背景冲突。

内容的提问来源于stack exchange，提问作者danistor_m