Hey there! I'm new to HTML and CSS, so please bear with me as I share my lack of expertise. I've been facing an issue while trying to add a background image via external CSS. Strangely enough, it works when added directly in the HTML file. I searched for solutions to this problem and tried a few, but none seemed to work or explain why this problem is occurring. Can someone please help me out?
I made sure to double-check the path when loading the image through CSS, but still no luck.
The directory structure looks like this:
|part1|
|css|
style.css
|images|
header_bg.png
logo.png
|js|
currently empty
index.html
--HTML code:
<!DOCTYPE html>
<html>
</head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="utf-8">
<style type="text/css">
.container_banner {
width: 100%;
height: 557px;
background-image: url("images/header_bg.png");
}
</style>
</head>
<body>
<div class="header">
<div class="center">
<img src="images/logo.png">
</div><!-- close the div center-->
</div><!-- close the header-->
<div class="container_banner">
<div class="center">
</div><!--close the div center-->
</div><!--close the container-banner-->
</body>
</html>
--My CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.center{
width: 1280px;
margin: 0 auto;
}
.header{
width: 100%;
height: 60px;
background-color: #212343;
}
.header img {
margin: 19px;
}
.container_banner{
width: 1280px;
height: 800px;
background-image: url("..images/header_bg.png");
}