body 上的 CSS 背景不考虑宽度

Question

具有最大宽度和“覆盖”背景图像宽度的正文

body {
    max-width: 300px;
    background-image: ...;
    background-size: cover;
}

图像不看主体宽度，而是看视口(viewport)宽度(FF、Chrome 和 IE)。有解决办法吗？

http://jsfiddle.net/tAB2S/

Answer 1

        body {
            max-width: 300px;
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAABvUlEQVR42u2b2Y7DIAxFx4j//2XPQ6UoTUYdUDBeevxcNXB8vREiqvqDjVkDAbBMrP/7CxFZ9bDsId9HGK3a5ELuLp6Q4xn3neQSgpEnzhB6mUixWPnFAa1STqEaAgtYwMKABSxgAQtYwMKABSxgAQtYxex+mgisT3Y54AMWYZgXlulLHZQFrPxac1NWRl4+sJK+c2voaHzBDR2NL7tF816CMNy/7oxya9mDZTesMh32JmUhq0Ctw5/OUNVcomY2BBawvh1WrsLSE63V4ra5m7JEZM9N91cZ3V9J+9rNnPdg5PzX36ZX1sX59QbvZrEfuzDxLQhtIaaDlMWuRMS9dPb4Pj/7oGzrcB79Hm41SDtm25SqaqXzjB1N6f10YZxgqGOJTR38hc5Uto6jTZ9xZySdBTzqcpsNP3xBG3bM9h+kE1UAzrOABSxgAQtYGLCABSxgAauE8aHTo4kVWIQhsIAFLGBhwJqEle7WsLOy4EUYLp54gDUx8bx96EQkEobAcodFJE4rC14TsNDXKCy+0pxO8IiLagisjdapho9gkeZHwxBZTfdZcCHBl07w0e/Bh1pftAQqZChyFrC87Rc9QsO8Gm6jLgAAAABJRU5ErkJggg=="); 
            background-size: contain;
            background-repeat:no-repeat;
            border: 3px solid red;
        }
        body > div {
            height: 300px;
        }

不应使用 background-size: cover; ，使用 background-size: contain; 和 background-repeat:no-repeat; .

检查 demo