css – 如何在网站上制作全宽背景而不是全屏？

2023年9月17日 180次阅读

我一直在尝试在定义其高度的网站中制作全宽背景图像,但图像在屏幕的左侧和右侧有5px空白.当在body部分中为背景定义CSS时,它是完美的,但在div部分中定义时,屏幕左侧和右侧的5px空白是不可取的.

CSS：

body {
    background: url(images/bg.jpg) #FFFFFF repeat-x;
    font: normal 12px verdana;
    color: #9C9C9C;
    line-height: 125%;
}
#top_banner {
    width: 1000px;
    margin: auto;
    height: 120px;
}
#menu_bg {
    width: 1000px;
    margin: auto;
    background: url(images/menu_bg.jpg) no-repeat;
    height: 86px;
    margin-top: 7px;
}
#menu {
    width: 805px;
    float: right;
    margin-top: 40px;
}
#slider_bg {
    background: #CCCCCC;
    height: 362px;
    width: 100%;
}
#slider {
    background: grey;
    height: 362px;
    width: 1000px;
    margin: auto;
}
#bigmenu_bg {
    background: #333745;
    height: 427px;
    margin-top: 4px;
}

HTML：

<body>
    <div id="top_banner"></div>
    <div id="menu_bg">
        <div id="menu"></div>
    </div>
    <div id="slider_bg">
        <div id="slider"></div>
    </div>
    <div id="bigmenu_bg"></div>
</body>

最佳答案 将此添加到您的CSS

* {
margin: 0;
padding: 0;

}

点赞