2014-09-21 128 views
0

这个问题最初是在Wordpress开发中问的,但是因为它涉及到更通用的CSS问题,所以我被要求在这里发布它。那个线程和初始解释,can be seen here背景图片不再填充屏幕


我有一个background-size: cover图像设置为单一的职位,其用于填充屏幕,与内容开始正下方的头部中。出于某种原因,它不再这样做。背景图片本身缩放以适应屏幕,但其下面的内容(帖子的文本)在叠加文本后立即开始。

你可以看看我的意思是in this fiddle

如果我将#hero-header设置为position:absolute; min-height: 100%; min-width:100%;,则当您加载页面时,图像会填满屏幕。然后问题在于它下面的内容在顶部运行,而不是从屏幕开始。

任何人都可以提出解决方案吗?


为了澄清我的意思是“填满整个屏幕”,按照下面的响应:

包含背景图片应该充满整个屏幕,当你加载的div。此刻,背景图像缩放以适合屏幕,但#hero-header不会强制页面下方的内容 - 它落在文本元素.hero-text之后,而是落在它之后。

回答

0

这已解决了这一问题:

背景图像移动到html#hero-header设置为height: 100vh