0

Я хочу чтобы фон класса main-box выходил за пределы контейнера и начинался с левого края, как на изображении, как это правильно сделать в CSS?

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

<section class="main">
        <div class="container">
            <div class="main-box">
                <h1 class="main-title">
                    Отримай знижку в <span class="green-text">-10%</span> при замовленні системи з <span class="green-text">ДСП</span>!
                </h1>
                <div class="main-subtitle__box">
                    <p class="main-subtitle__text">
                        В нас діє акція на <span class="green-text">ВСІ</span> системи для шаф-купе якщо в них входить <span class="green-text">ДСП</span> таких кольорів - <span class="green-text">Аляска Структурна</span>, <span class="green-text">Сонома</span>, <span class="green-text">Алюміній</span>
                    </p>
                    <p class="main-subtitle__text">
                        Встигни зробити замовлення <span class="green-text">до 26.12.2022</span> та отримай свою знижку в <span class="green-text">-10%</span>!
                    </p>
                </div>
                <button class="main-btn">ТОВАРИ</button>
            </div>
        </div>
    </section>

1 ответ 1

0

Не вводить изображение с этим фоном в тег с классом container а задать эту оббертку уже для внутренних div. И тут будет два решения:

  1. Простой - задавать это изображение через background css свойство;
  2. Сложнее - но правильнее, выполнить через добавление в тег с последующей source='' параметров тега в зависимости от медио разрешений отображения браузера.
2
  • Спасибо за ответ! Плюс-минус понимаю о чем ты, но можно как то подробнее на примере? У меня background-image задан для “main”, а этот фон я пытался задать через main-box который уже завернут в контейнер, но я так понимаю что прийдется его прописывать для каждого дочернего элемента мейн-бокса по отдельности? Даже если так то фон все равно же будет начинаться с сетки контейнера а не от края, потому что все эти элементы уже завернуты в контейнер
    – FarenGuard
    Commented 5 янв. 2023 в 11:33
  • Надо понимать весь дизайн что бы видеть где там нужен container а где нет, но в целом - да. Данная секция, имеет container элементы вне всех других. Можно и вообще без container обойтись. Это типовая задача, и дизайн типовой. Commented 5 янв. 2023 в 12:33

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.