CSS-файл не находит изображение для фона - PullRequest
0 голосов
/ 31 марта 2019

Я экспериментирую с созданием моей первой веб-страницы. Я пытаюсь получить изображение в качестве фона, но при тестировании с 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, и вот что было показано в пути и папках ...

введите описание изображения здесь

Любая помощь будет принята с благодарностью.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...