全屏背景图像与页脚位置产生冲突

因此，我正在尝试做两件能够独立运行的事情，但我在将它们集成在一起时遇到了问题。首先，这里有一个链接到该网站：http://ericbrockmanwebsites.com/dev4 全屏背景图像与页脚位置产生冲突

创建使用

html { 
    min-height:100%; 
    background-size: cover; 
    background-image: url(images/bg.jpg); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
}

创建停留在页面的底部，即使没有内容，这通常需要一个页脚全屏背景图片是这样的：

html { 
    height:100%; 
} 

body { 
    height:100%; 
} 

.container { 
    min-height:100%; 
} 

#footer { 
    clear:both; 
    position:relative; 
}

的问题是，为了使页脚留在底部的HTML的高度/身体需要为100％来定义，但除非我使用最小高度定义它们价值，背景图像只包括当它加载屏幕时。这意味着如果/需要向下滚动时，背景图像只能下到屏幕底部加载的位置。

我已经玩了几个小时，但似乎无法找到解决办法。我错过了明显的东西吗？

来源

2013-03-12 Eric Brockman

首先，height和min-height不互相排斥。没有理由不能同时使用两者。至于页面长于可用空间的背景滚动，你试过background-attachment: fixed？

来源

2013-03-12 23:49:05

我会和@Mark一起玩，让你知道它是怎么回事。谢谢。 – 2013-03-12 23:58:45

美丽，将html更改为高度：100％并使用了固定背景，很高兴知道。谢谢！ – 2013-03-13 00:01:36

全屏背景图像与页脚位置产生冲突

回答

相关问题