Html CSS：如何修复背景图像并创建文本框？

我正在学习网络开发几个月，同时重新创建我的个人网站。它还帮助我练习到目前为止学到的东西。然而，我有一些问题，我不能自己解决

到目前为止，我已经创建了一个主页和两个索引内容页。但我无法修复背景图像。图像在每一页上的比例都会发生变化。以下是我编写的CSS代码：

html {
background-image: url("file:///C:/Users/Rumeysa/Documents/VS Code Projects/rumeysagelgi.com/resources/jpegs/8.jpg");
background-color: #cccccc; 
background-size: cover; 
}

除此之外，我将h4元素设计为一个包含文本内容的框。我想将文本框设置为适当的尺寸，并在文本长度超过文本框所能覆盖的范围时使其滚动。以下是当前代码：

h4 {
font-family: 'Amiri', serif;
font-size: small;
font-weight: normal;
background-color: whitesmoke;
text-align: justify;
line-height: 120%;
border: 10px groove rgb(239, 230, 250);
border-radius: 2%;
padding: 5px;
overflow: scroll;
}

为了更好地理解，我上传了一些截图。我想背景图像看起来像在主页上。我非常感谢有经验的开发人员的帮助。多谢各位

---

由于

背景尺寸：封面，背景图像的尺寸正在改变属性

背景尺寸：封面

在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会垂直或水平剪切图像，以便不留空白

资料来源：

将其更改为
auto
to

现在，对于文本，将标题标记包装在
div
中，并添加以下css：

div{
空白：nowrap；/*重要-请参阅参考*/
宽度：/*添加您的宽度*/；
身高：/*添加您的身高*/；
溢出：自动；
}
h4{
溢出：继承；
/*无需继承空白，它将自动继承*/
}

为了使溢出生效，块级容器必须将设置的高度（高度或最大高度）或空白设置为nowrap

来源：
由于
背景尺寸：封面，背景图像的尺寸正在改变属性

背景尺寸：封面

在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会垂直或水平剪切图像，以便不留空白

资料来源：

将其更改为
auto
to

现在，对于文本，将标题标记包装在
div
中，并添加以下css：

div{
空白：nowrap；/*重要-请参阅参考*/
宽度：/*添加您的宽度*/；
身高：/*添加您的身高*/；
溢出：自动；
}
h4{
溢出：继承；
/*无需继承空白，它将自动继承*/
}

为了使溢出生效，块级容器必须将设置的高度（高度或最大高度）或空白设置为nowrap

资料来源：
谢谢。我编辑了代码，现在看起来好多了。但是，文本框的顶部和底部边框在滚动框时消失。你知道如何防止这种情况吗？@RumeysaGelgi你在
h4
wrapper中添加了边框了吗？如果没有，请将边框添加到
包装中。会有用的，谢谢。我编辑了代码，现在看起来好多了。但是，文本框的顶部和底部边框在滚动框时消失。你知道如何防止这种情况吗？@RumeysaGelgi你在
h4
wrapper中添加了边框了吗？如果没有，请将边框添加到
包装中。它会起作用的。