Question

我有一个2000x2000的px图像，在我的网站上设置为背景图像（作为<body>的背景图像），但我需要将此图像对齐到网页的底部。我怎样才能做到这一点？

我的CSS是：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

html {
    overflow-y: scroll;
}

body {
    background: url('../images/pozadie.jpg') left bottom repeat-x;
}

当背景图片高于屏幕高度时，

This answer无效...

Answer 1

请试试这个。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

html {
    overflow-y: scroll;
}

body {
    background: url('../images/pozadie.jpg') repeat-x 0 0;
    position:fixed;
    bottom:0;
}

Answer 2

使用background-attachment属性

body {
    background: url('../images/pozadie.jpg') left bottom repeat-x;
    background-attachment: fixed;
}

如何在网站底部对齐背景图像，当它高于屏幕高度？

2 个答案: