Почему фон перекрывает контент?

Question

[Norum]

Почему фон перекрывает контент страницы? z-index выставлял везде только можно, но в итоге ничего.

Сам сайт ct03638.tmweb.ru/online-store.html
Весь код https://jsfiddle.net/f16h4vts/

<section class="presentation" id="services">
        <div class="presentation-bg"></div>
        <div class="wrapper">
            <div class="content">
                <div class="title">Интернет-магазин под ключ</div>
                <div class="big-block">
                    <div class="desc block">
                        <div class="text">
                            Интернет-магазин – прекрасный способ организовать эффективные продажи через интернет. Функционал сайта регулярно дорабатывается и совершенствуется. Бизнес, основная цель которого, получение прибыли путём продажи товаров и услуг, нуждается в качественной работе профессионалов.
                        </div>
                        <a class="order" href="#">Сделать заказ</a>
                    </div>
                    <div class="advantages block">
                        <h4>Преимущества использования Интернет-магазина</h4>
                        <div class="adv-show-block ">
                            <div class="first-block">
                                <div class="wallet">
                                    <img src="img/wallet.svg" alt="wallet">
                                    <span>Для поддержания работы интернет-магазина требуется только оплата домена и хостинга</span>
                                </div>
                                <div class="accessible">
                                    <img src="img/accessible.svg" alt="accessible">
                                    <span>Ваш магазин будет доступен покупателем 24 часа в сутки – 7 дней в неделю</span>
                                </div>
                            </div>
                            <div class="second-block">
                                <div class="team">
                                    <img src="img/team.svg" alt="team">
                                    <span>Владелец интернет-магазина получает доступ к огромной аудитории</span>
                                </div>
                                <div class="fast">
                                    <img src="img/fast.svg" alt="fast">
                                    <span>Команда хороших исполнителей способна запустить работающий онлайн-магазин за короткий срок</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="presentation-footer">
                    <a href="index.html" class="back"><span class="arrow left">&larr;</span>
                        <span class="text-back">Вернуться назад</span></a>
                    <a href="#" class="work-expl"><span class="text-next">Примеры работ</span><span class="arrow right">&rarr;</span></a>
                </div>
            </div>
        </div>
    </section>

Comments

[Ankhena]

Зачем для фона отдельный div?
Вы прекрасно можете поставить множественный фон для presentation
Верхний градиентом linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

[Сергей delphinpro]

На крайняк можно проще

<section class="presentation" id="services">
    <div class="presentation-bg">
        <div class="wrapper">...</div>
    </div>
</section>

[Norum]

Ankhena, через background-color это все задается? Если да, то не работает

[Norum]

Сергей delphinpro, не понял вашего ответа

[Ankhena]

Norum, градиент это типа картинка и задается через bg image.

Сергей предлагает упрощенный вариант, с оберткой вместо пустого блока. И разметка логичнее и абсолюта нет.

[Norum]

Ankhena, если я задам через bg image, то у меня пропадет фоновая картинка. А в чем логичность той конструкции, что предложил Сергей? В том, что убрать блок .content? Если да, что это даст?

[Ankhena]

Norum, вы в состоянии самостоятельно погуглить как делаются множественные фоны?

А в чем логичность той конструкции, что предложил Сергей?

А прочитать, что я пишу, чем она легче:

И разметка логичнее и абсолюта нет.

?

В том, что убрать блок .content? Если да, что это даст?

Никто не предлагал убирать блок .content

Ну ёлки, нельзя же совсем так.
Если жара достала, ну отдохните, охладитесь чем-нибудь. А потом внимательно всё прочитайте.

Answer 1

[Алексей]

.presentation-bg {
  z-index: -1;
}

Comments

[Norum]

в итоге фон просто исчезает

[Алексей]

Norum, я вообще там фона как такого не вижу, это тоже самое что ты сделаешь

.presentation {
  opacity: .5;
}

[Norum]

Алексей, контент теперь блеклый

[Алексей]

Norum, я откровенно не понимаю что ты хочешь сделать. Не проще саму фоновую картинку в фотошопе затемнить ? Как должно то выглядеть ?