background-image не видит картинку в блоке/теге

Рейтинг: 0Ответов: 1Опубликовано: 22.06.2023

Использую vue3. Вообще я переношу верстку в компоненты. Но все скрипты и стили были подключены к основному HTML файлу. Проблема заключается в том, что в блоке с классом "top", он не видит изображение, но если написать путь в блоке с классом "header_inner", то изображение появляется. При использовании cover или no-repeat, картинка снова исчезает

header {
  margin: 0px;
  padding: 0px;
}

.top {
  background-color: black;
  background-image: url("../img/mainPage/header/") cover no-repeat; /* Не видит картинку в этом блоке */
  background-position: center; 
  height: 800px;
} 

.header_inner {
  background-image: url("../img/mainPage/header/header_img.png"); /* Видит картинку в этом блоке, но при использовании cover или no-repeat, картинка снова исчезает */

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<header>
    <div class="top">
    <div class="container header_inner">
        <!-- Навигация -->
        <div class="nav_menu">
            <div class="logo_img">
                <a href="">
                    <img src="/src/assets/img/mainPage/header/logo_main_new_1.png
                    " alt="логотип">
                </a>
            </div>
            <nav class="nav_header">
                <ul class="navbar_menu">
                    <li class="nav-item">
                      <a class="nav-link" aria-current="page" href="#">Главная</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">О театре</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Спектакли</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="actors.html">Актеры</a>
                    </li>
                  </ul>
            </nav>
        </div>
        <!-- Надпись с названием театра -->
        <section class="info">
            <h1>
                Новошахтинский драматический театр
            </h1>
        </section>
    </div>
</div>
</header>

css html background-image
Источник: Stack Overflow на русском

Ответы

▲ 0

Крч, просто добавил ещё один блок, после чего стало работать.

<header>
    <div class="top">
        <div class="header_inner">
            <div class="container">
                <div class="row row-cols-md-1">


                <!-- Навигация -->
                <div class="col">
                <div class="nav_menu">
                    <div class="logo_img">
                        <a href="">
                            <img src="/src/assets/img/mainPage/header/logo_main_new_1.png
                        " alt="логотип">
                    </a>
                </div>
                <nav class="nav_header">
                    <ul class="navbar_menu">
                        <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="#" onclick="slowScroll('#top')">Главная</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#" onclick="slowScroll('.main_inner')">О театре</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#" onclick="slowScroll('.perf_inner')">Спектакли</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="actors.html" onclick="slowScroll('.actors_inner')">Актеры</a>
                        </li>
                    </ul>
                </nav>
                </div>
            </div>
            <div class="col">
                <!-- Надпись с названием театра -->
                <section class="info">
                    <h1>
                        Новошахтинский драматический театр
                    </h1>
                </section>
            </div>
            </div>
        </div>
    </div>
</div>
</header>

.top {
 /* background-color: black;
  background-image: url("/src/assets/img/mainPage/header/") cover no-repeat;
  background-position: center; 
  height: 800px;
  padding: 0; */
} 

.header_inner {
  background-image: url("../img/mainPage/header/header_img.png");
  background-size: cover;
  background-repeat: no-repeat;
}