背景图片不再填充屏幕
问题描述:
这个问题最初是在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
之后,而是落在它之后。
答
这已解决了这一问题:
背景图像移动到html
并#hero-header
设置为height: 100vh
。