Question

因此，我试图做两件自己运作良好的事情，但我无法将它们整合在一起。首先，这是指向该网站的链接：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 / body的高度需要定义为100％，但除非我使用min-height值定义它们，否则背景图像只覆盖屏幕加载。这意味着如果/当需要向下滚动时，背景图像只会下降到屏幕底部加载的位置。

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

Answer 1

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

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

1 个答案: