0

我正在使用博主，最近将此 cc 代码插入到模板设计器的高级部分以输入背景图像

body { 
    background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
    background-attachment:fixed;
    background-color: none;
}
.body-fauxcolumn-outer div {
    background: none !important;
}

问题是，当浏览器窗口调整大小时，背景保持不变，但页面上的所有小部件/元素都会随着窗口一起调整大小。

见www.ashlylondon.blogspot.com

我需要背景与小部件一起调整大小，以便它们保持在背景图像的白色区域中。

4

3 回答 3

2

您非常依赖背景调整大小，以至于没有它您的布局将无法工作。这并不理想。处理这种情况的典型方法是：

  • 有一个覆盖整个屏幕的背景图像

  • 给<div>包含实际内容的元素一个background-color: white属性。

  • 您仍然可以使用background-size将背景图像缩放到屏幕大小，但不再需要布局工作。

这将确保您的内容无论如何都是可读的；它可以在background-size不适用的地方工作，例如在旧版浏览器和某些移动设备中。

于 2013-08-01T11:58:31.657 回答
1

将此添加到您的CSS

body{background-size:100%;}
于 2013-08-01T11:55:21.967 回答
1

尝试这个

添加身体类background-size:cover;

http://jsfiddle.net/pyFbF/3/

body { 
    background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
    background-attachment:fixed;
    background-color: none;
    background-size:cover;
}
.body-fauxcolumn-outer div {
    background: none !important;
}
于 2013-08-01T11:57:48.577 回答