如何修复css背景图片不起作用？

jexiocij 于 2022-10-23 发布在 Linux

关注(0)|答案(3)|浏览(173)

我正在尝试放置个人网页的背景图像，但我还没有找到任何解决我的问题的方法。我得到的只是一张白色背景。
图像的文件路径：/personal-page/images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg
代码的文件路径：/Personal-Page/estle.css
以下是我的代码：
CSS


# hero{

    background-image: url(/images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg);
    background-size: cover;
    background-position: top center;
    position: relative;
}

超文本标记语言

<!-- Hero Section -->
<section id="Hero">
    <div class="hero container">
        <div>
            <h1>Hello, My Name is Isaac</h1>
            <a href="#" type="button" class="cta">Portfolio</a>
        </div>

    </div>
</section>
<!-- End Hero Section-->

linux

来源：https://stackoverflow.com/questions/74129055/how-to-fix-css-background-image-not-working

3条答案

按热度按时间

chhkpiq41#

首先将html中的id=“Hero”更改为id=“Hero”(带小写h)。其次，在您的css中将路径更改为相对路径。/Image/test.jpg(添加该点)
超文本标记语言成为

<section id="hero">
        <div class="hero container">
            <div>
                <h1>Hello, My Name is Isaac</h1>
                <a href="#" type="button" class="cta">Portfolio</a>
            </div>

        </div>
    </section>

Css成为


# hero{

background-image: url(./images/test.jpg);
background-size: cover;
background-position: top center;
position: relative;
 }

赞(0）回复(0）举报 2022-10-23

2wnc66cl2#


# hero{

    background-image: url("images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg");
    .
    .
    .
}

赞(0）回复(0）举报 2022-10-23

kqqjbcuj3#

如果我没有记错的话：

background-image: url(/images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg);

应该是这样：

background-image: url('/images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg');

赞(0）回复(0）举报 2022-10-23

我来回答

如何修复css背景图片不起作用？

3条答案

相关问题

热门标签

最新问答