Question

我正在尝试在整个页面的近75％上做背景。我不希望背景在身体上，因为在设计的左侧有一个纯色区域。

如果我把背景放在主容器上，那么它就不是右手边的全屏。

完成任务的任何线索？我正在使用bootstrap

解决方案：应重新计算bg的位置。

 $( document ).ready(function() {

function recenter(){
    $pos = $('.container').offset().left;
    $loc = $pos+300;

    $('body').css('background-position-x', $loc + "px");
}
recenter();
$(window).resize(function(){ recenter(); });
});

Answer 1

尝试使用background-position属性。要使其适用于每个设备，请使用media-queries并为每个引导断点重置位置。

body {
    background-position: 100px 0;
    background-image: url(http://stylonica.com/wp-content/uploads/2014/02/Beauty-of-nature-random-4884759-1280-800.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
@media (min-width: 768px) {
    body {
        background-position: 200px 0;
    }
}
@media (min-width: 992px) {
    body {
        background-position: 150px 0;
    }
}
@media (min-width: 1200px) {
    body {
        background-position: 100px 0;
    }
}

在页面的某些部分的全屏幕背景

1 个答案: