Html 使用图像作为网站上某个部分的背景_Html_Css

Html 使用图像作为网站上某个部分的背景

html css

Html 使用图像作为网站上某个部分的背景,html,css,Html,Css,我试图在我的网站上使用一个图片作为一个部分的背景，但是我不能用它来填充这个部分。应该是这样的：相反，我得到的是：这是我的密码： <body> <header> <div class="burger"> <div class="line1"></div> <div class="line2"></div>

我试图在我的网站上使用一个图片作为一个部分的背景，但是我不能用它来填充这个部分。应该是这样的：

相反，我得到的是：

这是我的密码：

<body>
<header>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>

    <div class="logo-header">
        <img class="logo-lorem" src="./imagens/Grupo 105.png" alt="">   
    </div>
        <nav class="links-header">
            <a href="#">Lorem ipsum</a>
            <a href="#">Lorem ipsum</a>
            <a href="#">Lorem ipsum</a>      
        </nav>
        
        <button>Lorem ipsum</button>
</header>
<div class="hero-img-container">
    <div class="hero-text-container">
        <p class="p-topo">Lorem ipsum</p>
        <p class="p-meio">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <button class="btn-hero">Lorem ipsum</button>
    </div>
</div>

}由于css规则“背景大小：封面”，这意味着背景图像覆盖了整个元素（.hero img container）

因此，这也意味着“.hero img container”元素不是附加背景图像的正确位置

它应该附加到.hero img容器的父级。至少有一个具有所需维度的父级。很难说哪个父标记带有您发布的代码。

尝试使用object fit property

对象匹配：覆盖

你可以在下面查看更多信息

请以文本形式发布您的代码，我们无法复制/粘贴图像中的文本！：）同意上面的评论，也包括你的HTML，而不仅仅是CSS。好的，代码就在那里。那么我怎样才能使图像成为页面某一部分的背景呢？图像的上方和下方都有很大的空格，这些空格表明。hero img容器元素没有覆盖你想要的区域。是否有一位家长负责该区域的所有工作？

.hero-img-container{
height: 100%;
width: 100%;

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-image: url(./imagens/ballpen-blur-close-up-461077.png);