CSS无法显示背景图片

Question

Can't figure out why the background image is not showing... Used / and \\ , short and long path... Any cue would be appreciated. 无法弄清楚为什么背景图像没有显示...用过的/和\\，短路径和长路径...任何提示将不胜感激。 Thanks 谢谢

<head>

<title>Restaurant Lambda</title>

<link href="css/style.css" rel="stylesheet">

</head>


<body>
<!--Menu-->
    <header>
        <div class="container">
            <nav class="topnav">
                    <a href="#home" class="active">Home</a>
                    <a href="#news">About</a>
                    <a href="#contact">Ingredients</a>
                    <a href="#contact">Menu</a>
                    <a href="#contact">Reviews</a>
                    <a href="#contact">Reservation</a>

            </div>
                </nav>

    </header>


</body>

.countainer {
    background: url("C:/Users/lili/Desktop/LesManifestesTest/img/Bg.png") no-repeat 0 0;
}

Answer 1

As well as the typo in your class name (the extra 'u' in container/countainer), your syntax is incorrect. 以及类名中的错字（容器/计数器中的额外“ u”），您的语法也不正确。 You are closing the nav after you've closed the div , instead of the other way around. 关闭div 之后，您将关闭nav ，而不是相反。

Correct these errors, and your image should show correctly (given that your path is correct) 更正这些错误，并且图像应该正确显示（假设您的路径正确）

 .container { height: 100vh; background: url("https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320__340.jpg") no-repeat 0 0; } nav { text-align: center; } nav a { color: white; /*added for better visibility*/ font-weight: bold; }

 <body> <!--Menu--> <header> <div class="container"> <nav class="topnav"> <a href="#home" class="active">Home</a> <a href="#news">About</a> <a href="#contact">Ingredients</a> <a href="#contact">Menu</a> <a href="#contact">Reviews</a> <a href="#contact">Reservation</a> </nav> </div> </header> </body>

Answer 2

There are actually 3 reasons this might be happening. 实际上可能有3个原因。

In the div, it says <div class="container"> but in your css, you have 在div中，它表示<div class="container">但在CSS中，

.countainer {
    background: url("C:/Users/lili/Desktop/LesManifestesTest/img/Bg.png") no-repeat 0 0;
}

So you would need to fix the spelling error. 因此，您需要修复拼写错误。

Put the file and the image in a folder, then link it like 将文件和图像放在文件夹中，然后像链接一样

.container {
    background: url("folder/imagename") no-repeat 0 0;
}

Fix your formatting 修正格式

In the code block, you've got <div> then <nav> but you end with </div> then </nav> so after reformatting your code, it should look like 在代码块中，先输入<div>然后<nav> <div>然后以</div>然后</nav>结尾，因此在重新格式化代码后，它看起来应该像

<div class="container">
        <nav class="topnav">
                    <a href="#home" class="active">Home</a>
                    <a href="#news">About</a>
                    <a href="#contact">Ingredients</a>
                    <a href="#contact">Menu</a>
                    <a href="#contact">Reviews</a>
                    <a href="#contact">Reservation</a>

        </nav>
</div>

CSS无法显示背景图片

问题描述

2 个解决方案

解决方案1
0 2019-07-18 22:22:07

解决方案2
0 已采纳 2019-07-18 22:55:19

CSS无法显示背景图片

问题描述

2 个解决方案

解决方案1 0 2019-07-18 22:22:07

解决方案2 0 已采纳 2019-07-18 22:55:19

解决方案1
0 2019-07-18 22:22:07

解决方案2
0 已采纳 2019-07-18 22:55:19