Background-image not showing with 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;
}
2 answers
solution1
0 2019-07-18 22:22:07
As well as the typo in your class name (the extra 'u' in container/countainer), your syntax is incorrect. You are closing the nav after you've closed the div , instead of the other way around.
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>
solution2
0 ACCPTED 2019-07-18 22:55:19
There are actually 3 reasons this might be happening.
- In the div, it says
<div class="container">but in your css, you have
.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 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.