Question

见背景：

http://www.achingsoul.co.uk/gallery/

它适用于body元素并且大小合适。但是当你在这里看到它时：

http://www.achingsoul.co.uk/services/

它伸展开来，非常奇怪。我不确定它是什么，因为根据检查员的说法，它在两个页面上的CSS是相同的：

body {
    background-image: url('images/aching-soul-background-2.jpg');
    color: #4a2f1f;
    background-size: cover;
}

不知道是什么我做错了？

Answer 1

删除background-size: cover; 您的背景将不再延伸，相反，它将垂直重复。两个页面之间的差异是由于服务页面中的高度越大，当您使用cover-size属性的覆盖值时，它将导致此效果。

Answer 2

尝试background-position:50% 50%;

以及

`/* FOR A LARGE-SINGLE IMAGE TO STRETCH COMFORTABLY ACROSS A BODY*/
    -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;`

背景不同大小在不同的页面上

2 个答案: