Я экспериментирую с созданием моей первой веб-страницы. Я пытаюсь получить изображение в качестве фона, но при тестировании с localhost оно не отображается, хотя все остальные форматы CSS есть. Я перешел к другому вопросу, связанному со стековым потоком, связанным с похожими проблемами (кажется, распространенным), но ничего не помогло.
Я также пробовал файл .jpg в той же папке, что и файл .css (это текущее расположение.
Ниже приведен код, который у меня сейчас есть ...
index.html
{% load static %}
<title>lvl6</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'pages/style.css' %}">
<header class="header">
<div class="header-text">Sign in via:</div>
<a href="#" class="header-link">LinkedIn</a>
<a href="#" class="header-link">Facebook</a>
</header>
<section class="landing-section landing-main">
<h1 class="brand">lvl6</h1>
<p class="landing-main-text">
"Creating a future environment within which the human soul is destined to Flourish"
<br>
<br>
subtext....
</p>
</section>
style.css
.landing-section {
min-height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.landing-main {
background: url("stock.jpg") no-repeat center center fixed;
background-size: cover;
}
.header {
width: 100vw;
display: flex;
justify-content: flex-end;
top: 0;
left: 0;
position: absolute;
background: rgba(0,0,0,0.5);
}
.header-link {
margin: 1rem;
border-bottom: 3px solid #c55e00;
font-size: 1.2rem;
color: #222;
text-decoration: none;
color: #ccc;
}
.header-text {
margin: 1rem;
font-size: 1.2rem;
color: #ccc;
}
'stock.jpg' находится в той же папке, что и 'style.css'. Я попытался создать каталог для изображений и поместить его туда, но не смог получить страницу, чтобы взять его оттуда.
Я посмотрел в инструменте разработчика через Chrome, и вот что было показано в пути и папках ...
введите описание изображения здесь
Любая помощь будет принята с благодарностью.