用背景图片覆盖整个标题

Question

在标题中，我试图获取背景图片以覆盖完整的标题，但是我正在做的任何事情似乎都无法修复。

 .header { background-image: url("https://iso.500px.com/wp-content/uploads/2015/12/stock-photo-125301449-1500x822.jpg"); background-postion: center center; background-size: cover; height: 100%; width: 100%; } 

 <div class="header"> <div id="header-text"> <h1>Olivia Cahill</h1> <h2>A Collection of Her Art</h2> </div> </div> 

编辑：当我说封面时，我的意思是我希望页面的整个第一部分都具有图像

Answer 1

虽然它确实可以消除长宽比，但看起来这可能是您想要的：

 .header { background-image: url("https://iso.500px.com/wp-content/uploads/2015/12/stock-photo-125301449-1500x822.jpg"); background-postion: center center; background-size: 100% 100%; height: 100%; width: 100%; } 

 <div class="header"> <div id="header-text"> <h1>Olivia Cahill</h1> <h2>A Collection of Her Art</h2> </div> </div> 

这是CSS3的背景尺寸表达式。 通过两次指定100％，我们实际上是在说我们想要：100％（宽度）x 100％（高度）。

Answer 2

 body { margin: 0px !important; padding: 0px !important; } header { background-image: url("https://iso.500px.com/wp-content/uploads/2015/12/stock-photo-125301449-1500x822.jpg"); background-postion: center center; background-position-y: 30%; overflow: hidden; height: 200px; width: 100%; text-align: center; } header h1 { color: #F0477F; font-family: "Roboto", sans-serif; font-size: 1.999em; font-weight: 400; } header h2 { color: #F0477F; font-family: "Roboto", sans-serif; font-size: 1.414em; font-weight: 400; } 

 <header> <h1>Olivia Cahill</h1> <h2>A Collection of Her Art</h2> </header>