RGameShow
@RGameShow
WEB-программист

Как правильно реализовывать элемент дизайна за пределами контейнера?

Я программист, один в офисе, у меня нет знакомых программистов и по этому спрошу тут, глупый не глупый вопрос не нужно судить, просто дайте совет, код не обязательно))

Есть такой макет:
5e7cbd235d8c1040228371.jpeg

Как вообще во frontend принято делать такие элементы, как рыжая клякса?

Я ее сделал следующим образом:
section{
    position: relative;
}
section.section_service:before {
    content: '';
    background: url(./bg.svg) center left no-repeat;
    background-size: cover;
    width: 960px;
    height: 720px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

<section>
    <div class="container">
        {CONTENT}
    </div>
</section>


У меня слишком много получается медиазапросов для того чтобы на всех устройствах корректно все отображалось.
Мб есть какая-то уже отработанная схема как реализовывать подобные вещи?
  • Вопрос задан
  • 53 просмотра
Пригласить эксперта
Ответы на вопрос 1
wapster92
@wapster92 Куратор тега CSS
Люблю трилогию ME
Ну по сути один из способов ты сделал, но я бы позиционировал его от левого края на 50% или прям от правого блока, но тоже при помощи left. Обертке которая находится уровнем выше контейнера задал ov:h. Таким образом не нужно будет прописывать кучу медиа запросов. Еще можно фоном с позиционированием изображения.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы