Не работает свойство background-image в CSS. В чём проблема?

Question

[Алексей Хацер]

<header>
        <div class="container">
            <div class="header-header">
                <div class="header-lines">
                    <div class="hl-f"></div>
                    <div class="hl-s"></div>
                    <div class="vl-f"></div>
                    <div class="vl-s"></div>
                    <div class="vl-t"></div>
                </div>
                <div class="header-up">
                    <address class="header-address">Новокузнечный переулок 4/1</address>
                    <a class="header-phone" href="tel:[phone]">8 [phone]</a>
                </div>
                <div class="header-down">
                    <p class="catalog">Каталог</p>
                    <p class="delivery">Доставка</p>
                    <p class="collection">Коллекции</p>
                    <p class="contacts">Контакты</p>
                </div>
             </div>
             <div class="hero">
                <a href="#" class="wine-card">винная карта</a>
                <a href="#" class="degustation">дегустация</a>
             </div>
        </div>
    </header>

А так выглядит CSS:

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-family: 'Montserrat', sans-serif;
}
header{
    background-image: url(../Le-Corte/img/bg.jpg);
}
.container{
    position: absolute;
    left: 300px;
    right: 300px;
}
.header-up{
    display: flex;
    justify-content: space-between;
}
.header-up .header-address{
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.header-up .header-phone{
    text-decoration: none;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

UPD. Проблема исчезает, когда убираю в "container" свойство position: absolute;
Может в таком случае нужно правильно разбить разметку в самом HTML?

Answer 1

[Ankhena]

UPD. Проблема исчезает, когда убираю в "container" свойство position: absolute;

Абсолют выводит элемент из потока. Родительский элемент и соседи перестают о нем знать.

Поскольку других детей нет, header имеет нулевую высоту -> вы не видите фона.

Может в таком случае нужно правильно разбить разметку в самом HTML?

Может быть.
Но чтобы сказать точно, нужно видеть макет (и возможно ТЗ)

p.s.
Интересно, что вы хотели сказать этим кодом

font-family: 'Playfair Display', serif;
font-family: 'Montserrat', sans-serif;

Comments

[Ankhena]

Вот это:

<div class="header-lines">
                    <div class="hl-f"></div>
                    <div class="hl-s"></div>
                    <div class="vl-f"></div>
                    <div class="vl-s"></div>
                    <div class="vl-t"></div>
</div>

точно наводит на мысли, что в разметке оно лишнее.

[Алексей Хацер]

Я уже успел решить проблему с контейнером сам, но благодарю за помощь).

p.s.
Интересно, что вы хотели сказать этим кодом
font-family: 'Playfair Display', serif;
font-family: 'Montserrat', sans-serif;

Я не был уверен в том, достаточно ли просто вставить линки в html, поэтому подумал, что стоит сделать это и в CSS, хотя я уже знаю, что эти ссылки в самом CSS нужно вставлять в конкретные теги с текстом.

[Ankhena]

Алексей Хацер, так вы просто перебиваете один шрифт другим. Т.е. первая из этих строку будет просто проигнорирована.