My goal is to replicate a webpage template as a way to improve my understanding of HTML/CSS. I am attempting to use an image as the background for a DIV in my document, but for some reason, it's not appearing. Please keep in mind that I am still new to coding.
As a test, I tried using a random stock photo URL from Google and that worked. This makes me wonder if the issue lies with the location of the actual image file (it's in the same folder as the document) or if there is another conflict in my code affecting the display of the image. I'm uncertain at this point.
HTML file:
<html>
<head>
<title>conquer</title>
<link rel="stylesheet" type="text/css" href="conquer.css" />
</head>
<body>
<div class="navbar">
<a href="">Homepage</a>
<a href="">About Us</a>
<a href="">Services</a>
<a href="">Contact</a>
<a href="">External</a>
</div>
<div class="topbanner"></div>
</body>
</html>
CSS file:
body {
background-color: #fff;
margin: 0;
}
/** Navigation Bar **/
.navbar {
background-color: #383E4C;
height: 100px;
width: 100%;
position: fixed;
text-align: center;
margin-top: 0px;
}
.navbar a {
color: #F6F6F7;
text-decoration: none;
font-size: 22px;
font-family: "Helvetica", sans-serif;
border: 1px solid #646D7C;
padding: 15px;
margin-top: 20px;
margin-right: 20px;
display:inline-block;
}
.navbar a:hover {
background-color: #49505F;
}
/** Top Banner **/
.topbanner {
height: 500px;
width: 300px;
background-image: url('/city.jpg');
background-repeat: no-repeat;
}
The aim was to have the image displayed within the DIV, but when checking the console elements, all I see is a large invisible block.