Question

我将体宽设置为1920px并设置相同宽度的背景图像。图像用于标题。因为我的身体内部有较窄的包装，如果我将标题背景放入标题本身，标题背景的宽度会被包装的边框切割。所以我把它放到了身体但现在我的底部有水平滚动条，页面中心向右移动。如何摆脱滚动条并使页面居中？这是代码：

body {
    background-color: #f6f6f6;
    background-image: url('../img/menu-background.png');
    width: 1920px;
    background-repeat: no-repeat;
    font-family: 'PT Sans';
}

.wrapper {
    width: 950px;
    min-height: 1658px;
    border: 1px solid grey;
    margin: 0 auto;
}

header a {
    text-decoration: none;
    text-align: center;
    display: block;
    width: 365px;
    margin-left: auto;
    margin-right: auto;
}

和HTML：

<body>
    <div class="wrapper">
        <header>
            <a href="#">
                <h1>Lorem ipsum</h1>
                <span>bla-bla-bla</span>
            </a>
        </header>

Answer 1

您无需在主体上指定宽度为1920px。

屏幕分辨率较高的用户无论如何都会看到整个背景图片。

我建议将背景图片标记设置在一行上，如下所示：

body {
    background: #f6f6f6 url('../img/menu-background.png') no-repeat center 0;
}

Answer 2

您可以通过添加来阻止滚动条 overflow-x:hidden;到你的身体

没有水平滚动条的大体宽

2 个答案: