I am trying to display a background image on a few pages of my personal website that I am building.
I've tried to make sure that my CSS stylesheet is loaded correctly by checking my website's network (and I believe it is), I've tried to make sure that the file path to the image is correct by putting the image folder in all possible places and tried to put the full file path in the url() function, and I've tried to create different elements on my page to see if it was just an issue of my image not being displayed in a valid element. None of these have worked so far
My html index / home page:
<html lang="en">
<head>
<% include ../helpers/head %>
</head>
<body>
<header>
</header>
<!-- the class 'page-header' creates bootstrap components. -->
<div class="page-header">
<% include ../helpers/navbar %>
<h1>Home</h1>
</div>
<div class="element">
<h2>
</h2>
</div>
</body>
</html>
my main.css file:
* {
margin: 0;
padding: 0;
}
.element {
background-image: url(professional1.jpg);
}
header {
background-image: url(**relative filepath inserted here);
}
.page-header {
background-image: url(**full filepath inserted here**);
background-color: #00bda5;
}
body {
background-image: url('professional1.jpg');
background-size: cover;
background-position: center;
}
my html head.ejs file:
<meta charset="UTF-8">
<title>My Website</title>
<!-- First we import our css files -->
<!-- bootstrap css -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<!-- Google font CSS -->
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet">
<!-- this app's own css -->
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<!-- Next import js files -->
<!-- first we import jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- then bootstrap -->
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- then own js file -->
<script src="js/main.js"></script>
So far, I am not seeing image whatsoever. Is anyone able to see the issue?
Aucun commentaire:
Enregistrer un commentaire