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
    5 янв в 11:33
  • Надо понимать весь дизайн что бы видеть где там нужен container а где нет, но в целом - да. Данная секция, имеет container элементы вне всех других. Можно и вообще без container обойтись. Это типовая задача, и дизайн типовой. 5 янв в 12:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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