我的 CSS 背景图片没有显示

Question

我正在使用以下 css 在页面上显示背景图像。但是，我得到的只是一个空白的白色背景。我一直在谷歌上搜索，但无法弄清楚我正在做的事情有什么问题...有什么建议吗？

CSS:

#home_body {
    background: url(/resources/images/main_tree.png) no-repeat;
}

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <link rel="stylesheet" type="text/css" href="resources/css/main.css">
</head>
<body id="home_body">
    <div>
        <h1 class="main_heading">Welcome</h1>
    </div>

    <div id="home_nav">
        <nav>
            <ul id="main_menu">
                <li><a href="gv_shop.html">Shop</a></li>
                <li><a href="gv_gallery.html">Gallery</a></li>
                <li><a href="gv_about.html">About Us</a></li>
                <li><a href="gv_news.html">News</a></li>
                <li><a href="gv_contact.html">Contact Us</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

Answer 1

#home_body {
background-image: url(/resources/images/main_tree.png) no-repeat;}

更改css class查看图片

Answer 2

1) 如果您将图像 URL 复制粘贴到您的浏览器中，图像会显示吗？

2) 用单引号将 CSS class 图片引用括起来。

3) 检查您的引用，您在 CSS 中将根目录中的图像引用为 <root>/resources/images/main_tree.png，但 HTML 页面要求相对 resources/css/main.css CSS 文件，所有内容 都应该是根引用的（因此页面上的所有地址都应该以 / 开头）。

4) 检查没有其他 classes 或 CSS 规则应用于 <body> 元素并且 "overwriting" 是您的背景。

5) 尝试使用 background-image 而不是背景 shorthand。但是记得把 no-repeat 放在新的属性:-

background-image:   url('/resources/images/main_tree.png');
background-repeat: no-repeat;

我的 CSS 背景图片没有显示

My CSS background image is not showing

html

css

background-image