CSS3背景画像の配置

Question

新しいウェブサイトをアナウンスするための簡単なプレースホルダページを作成中です。ページが

• すぐにその画像の下中央に背景のロゴ画像
• 「キャッチフレーズ」

以外の何で構成されて私は、これは簡単だろうと思った - 私はと位置付け、背景画像を配置しますそのサイズを指定し、絶対的に配置されたh1ヘッダーを配置して、背景画像のすぐ下にある「キャッチコピー」を取得します。

* 
 
{ 
 
color:white; 
 
font-family:arial; 
 
margin:0 !important; 
 
padding:0 !important; 
 
} 
 
body 
 
{ 
 
background-color:black; 
 
background-origin:border-box; 
 
background-image:url('https://unsplash.it/1064/800'); 
 
background-size:auto 25%; 
 
background-position:center 37.5%; 
 
background-repeat:no-repeat; 
 
height:100vh; 
 
} 
 
h1 
 
{ 
 
text-align:center; 
 
position:absolute; 
 
top:62.5%; 
 
right:0; 
 
left:0; 
 
}

<h1>CSS3 is Cool!</h1>

これは理解

その背景-原点に取り組んでいる：国境ボックス。
1. た画像を背景画像は、そのコンテナの高さの37％で、その左上隅と水平方向中心
2. background-size:auto 25%だろう

収率

background-position:center 37.5%（100vhに設定）

絶対配置されたh1要素は、先頭から（37.5 + 25）％です。

私はpadding:0とmargin:0をすべてに設定しました。しかし、最終的な結果は期待通りではありません。ロゴイメージの下部とh1ヘッダーの上部の間に余裕があります。明らかに、私はここでバックグラウンドの位置やサイズのいくつかの側面を誤解しています。私は正しい軌道に乗ることができるかもしれない人に多くの義務を負うだろう。

Answer 1

％をバックグラウンドイメージに使用すると、最初の考えとしては全く機能しません。

％を使用して背景位置を設定すると、それ自体の横方向のX％が要素全体のX％方向に揃うように画像が配置されます。 CSSのトリックでこの記事は非常によく、それを示していますpercentage-background-position-works

使用ビューポートの高さ単位vh代わり

* 
 
{ 
 
color:white; 
 
font-family:arial; 
 
margin:0 !important; 
 
padding:0 !important; 
 
} 
 
body 
 
{ 
 
background-color:black; 
 
background-origin:border-box; 
 
background-image:url('https://unsplash.it/1064/800'); 
 
background-size:auto 25%; 
 
background-position:center 37.5vh; 
 
background-repeat:no-repeat; 
 
height:100vh; 
 
} 
 
h1 
 
{ 
 
text-align:center; 
 
position:absolute; 
 
top:62.5vh; 
 
right:0; 
 
left:0; 
 
}

<h1>CSS3 is Cool!</h1>