Question

我的html具有以下结构：

<div class="christmas_footer_wrapper">
    <div class="christmas_footer">
        <div class="christmas_bottom">
            <h1><span class="christmas_titles otherlink"></span></h1>
        </div>
    </div>
</div>

css：

.christmas_footer_wrapper{
    margin:225px auto 0 auto;
    clear:both;
    width:100%;
    height:auto;
    background-color:#000000;
}
.christmas_footer{
    margin:0px auto;
    padding:0px;
    background-image:url("images/footer.jpg");
    background-repeat:repeat-y;
    min-height:281px;
    width:1261px;
}
.christmas_bottom{
    width:1000px;
    margin:0px auto;
    padding:0px;
}

问题在于，由于我的背景图片是1261px，我将宽度设置为1261px并在y轴上重复。

现在正如您所想象的那样，当您放大并且屏幕变得小于1261px时，它会将内容推向右侧。

现在我想知道如何解决这个问题，好像我将宽度设置为100%，它在左边裸露并在x轴上重复，并且不会保持中心。

有没有人知道如何排序这个问题？

提前谢谢。

Answer 1

请尝试将此属性添加到.christmas_footer下面的background-repeat:repeat-y;类，即

background-position:center;

Answer 2

background-position:center;

全部

CSS和HTML背景将内容推向左侧

2 个答案: