Верстка блока с учетом сохранения его позиционирования

Question

На страничке имеется одна из секций (с закрашенной эмблемой), куда на общий div я поместил два background-а. Правый bground (фото) -40% ширины, а левый 60%. Суть в том, что все секции имеют фиксированную ширину - 1350px, размещенные по центру. Общий main 100% ширины, display: flex.

Answer 1

Почему не сделать обертку для основного контента? Или я что-то не понимаю? )

body {
    margin: 0
}

.section {
    position: relative;
    margin-bottom: 50px
}

@media (max-width:767px) {
    .section {
        padding-bottom: 60%
    }
}

.section__left {
    box-sizing: border-box;
    padding: 50px
}

@media (min-width:768px) {
    .section__left {
        width: 40%;
        padding: 50px 50px 50px 0
    }
}

@media (max-width:767px) {
    .section__left {
        background: linear-gradient(90deg, rgba(108, 12, 82, 0.21) 0%, rgba(255, 255, 255, 0) 13.54%), #F3F3F3;
        margin: 0 -15px
    }
}

.contain {
    max-width: 1350px;
    padding: 0 15px;
    margin: auto
}

@media (min-width:768px) {
    .bg__left {
        position: absolute;
        display: block;
        left: 0;
        bottom: 0;
        top: 0;
        width: 40%;
        background: linear-gradient(90deg, rgba(108, 12, 82, 0.21) 0%, rgba(255, 255, 255, 0) 13.54%), #F3F3F3;
        z-index: -1
    }
}

.bg__right {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 60%;
    background: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687") no-repeat right center;
    background-size: cover;
    z-index: -1
}

@media (min-width:768px) {
    .bg__right {
        top: 0;
        left: auto;
        width: 60%;
        height: auto
    }
}

<div class="section">
    <div class="bg__left"></div>
    <div class="bg__right"></div>
    <div class="contain">
        <div class="section__left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
            laborum.</div>
    </div>
</div>

<div class="contain">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

БЛОГ НА HUSL

Верстка блока с учетом сохранения его позиционирования

Ответы (1 шт):