Question

我正在使用博客，并且最近将此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

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

Answer 1

您依赖于背景调整大小，如果没有它，您的布局将无法正常工作。那不太理想。这种情况的典型方法是：

拥有覆盖整个屏幕的背景图片
为包含实际内容的<div>元素提供background-color: white属性。
您仍然可以使用background-size将背景图像缩放到屏幕尺寸，但不再需要必要才能使布局正常工作。

这个犯规确保你的内容无论如何都是可读的;它会在background-size不会的地方工作，例如在较旧的浏览器和一些移动设备中。

Answer 2

将此添加到您的css

body{background-size:100%;}

Answer 3

试试这个

添加正文班级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;
}

背景没有调整窗口大小

3 个答案: