Question

我在phpbb论坛上使用CSS，而我正试图让我的背景适合。

如果您想查看它正在做什么，该网站为http://bofb.org。

无论如何，我正在尝试获取背景以拉伸页面，但是针对不同的浏览器尺寸选择最小宽度。

我试过了：

body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #828282;
    background-color: #FFFFFF;
    /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
    font-size: 10px;
    margin: 0;
    padding: 12px 0;
    background-image: url("{T_THEME_PATH}/images/bg_wrap.png") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我的图像根本没有显示。我是从this site得到的。

如果我这样做：

body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #828282;
    background-color: #FFFFFF;
    /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
    font-size: 10px;
    margin: 0;
    padding: 12px 0;
    background-image: url("{T_THEME_PATH}/images/bg_wrap.png");
   background-size:100%;
}

它会显示正常，直到您获得较低分辨率的屏幕或使窗口变小。

理想情况下，我希望以页面为中心的特定宽度进行重复，但我还没有这样做。

有人有任何建议吗？

Answer 1

这应该完全像你想要的那样工作。但你需要定义一个背景颜色，这样背景图像就不会在大屏幕上被切断。

background: url("./styles/reds/theme/images/bg_wrap.png") repeat-y center center fixed;

因为你还没有接受我的回答（这是正确的）这是身体的完整风格类：

body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #828282;
    background-color: #FFFFFF;
    font-size: 10px;
    margin: 0;
    padding: 12px 0;
    background: url("./styles/reds/theme/images/bg_wrap.png") repeat-y center center fixed; 
}

更改背景颜色以删除白色边框并删除html {..} css类plz。 html标签不应该被设置样式

Answer 2

在 CSS 添加

body, html{
    width:100%;
    height:100%
}

第二次尝试：

html{
    width:100%;
    height:100%;
}
body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #828282;
    background-color: #FFFFFF;
    /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
    font-size: 10px;
    margin: 0;
    padding: 12px 0;
    background: url("{T_THEME_PATH}/images/bg_wrap.png") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
}

Answer 3

您从css-tricks中获取的CSS未正确复制。尝试使用background：，而不是background-image：

Answer 4

我在phpbb中有一个不适合整个屏幕的图像背景。我为正文和html添加了100％的宽度和高度，但它没有修复它。最后我将背景图像定义为html元素，而不仅仅是正文。似乎可以做到这一点。

无法获得背景以填充最小宽度

4 个答案: