身体上的CSS背景不考虑宽度

Question

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

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

图像不看主体的宽度，而是视口的宽度（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; 。

检查演示

Answer 2

一种选择是也向html添加最大宽度。 不只是身体

DEMO

html { max-width: 300px;}

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: cover;
            background-repeat: no-repeat;
            border: 3px solid red;
        }
        body > div {
            height: 300px;
        }

Answer 3

尝试添加

body
{
background-position:10px;
width:310px;
}

谢谢AB