フルヘッダーを背景画像でカバーする

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

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>

Answer 2

を持っているページの全体の最初の上部をしたいという を意味します

アスペクト比を捨てるのですが、これはwあなたが探してすることができる帽子：

.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％を2回指定すると、本質的には100％（幅）×100％（高さ）となります。