@WhiteSama

Как лучше сделать фиксированный бэкграунд, растягивающийся по ширине и высоте, по краям (лево\право) от тела сайта?

Есть сайт фиксированный ширины (960 пс) . Нужно поставить бэкграунд, который растягивался бы на всю высоту, а его определенный кусок растягивался слева и справа на всю ширину от тела сайта. Сейчас я делаю это как мне кажется костылями. Может есть более логичный ход?

codepen

Вот пример кода:

<body>
  <div class="pageWrapper">
    <div class="content"></div>  
</div>
</body>

.bgLeft {
    background: url(../../img/bg_left.jpg);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
.bgRight {
    background: url(../../img/bg_right.jpg);
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}
.content {
    padding-bottom: 50px;
}
.pageWrapper {
    background: #fff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    width: 960px;
}

var pageWrapper = $('.pageWrapper');
        pageWrapper.before('<div class="bgLeft"></div>');
        pageWrapper.after('<div class="bgRight"></div>');

        var resizeTimeoutId;

        function window_resize() {
            clearTimeout(resizeTimeoutId);
            resizeTimeoutId = setTimeout(ResizeCode(), 10);
        }

        function ResizeCode() {
            var siteHeight = pageWrapper.outerHeight(true);
            var docWidth = $(window).width();

            var outWidth = (docWidth - 960) / 2;

            $('.bgLeft').css({height: siteHeight, width: outWidth});
            $('.bgRight').css({height: siteHeight, width: outWidth});
        }

            window_resize();

        $(window).resize(function() {
            $(window).bind('resize', function () {
                window_resize();
                return false
            });

        });
  • Вопрос задан
  • 220 просмотров
Решения вопроса 1
varzin
@varzin
UI/UX дизайнер в instadev.ru
Вопрос не очень понятен, но если вам нужно несколько фоновых картинок с разным позиционированием, то можно просто прописать несколько параметров через запятую.

Пример:
.wrapper {
    background-image:
        url(bg-left.jpg),
        url(bg-right.jpg),
        url(bg-cover.jpg);
    background-size:
        100px 50px,
        auto,
        cover;
    background-position:
        left top,
        right top,
        center;
    background-repeat:
        no-repeat;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@WhiteSama Автор вопроса
я знаю ширину только центрального блока. как я смогу задать ширину для боковых бГ???
Ответ написан
Ваш ответ на вопрос

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

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