Есть сайт фиксированный ширины (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
});
});
Простой
