【STORK】ヘッダー背景を横幅いっぱいに表示するCSS

 

横幅の広い画像を貼る場合、どうしても横幅に合わせて画像が縮小された状態で表示されます。

記事に貼る場合はしょうがないんですが、例えば『ヘッダー画像を大きく見せたい』などという場合に『常に横幅ギリギリで表示させる』という事が可能。

以前【タイトル画像で同じことができないか?】というご質問を受けて調査したのですがなぜかどうしてもタイトル画像ではできませんでした。

しかし【STORK】のヘッダー画像ならこれが適用されたので、一応載せておきます。

 

デフォルトではこんな感じで両サイドに空白ができてしまうのですが

 

こんな風に横幅ギリギリまで広がります。

更に『メニューの文字の大きさ』に注目して次図を見てください。

 

ブラウザを拡大しても画像はほぼ同じ状態を維持するのです。

この技を使用すればサイトを大きく見せる事ができますので『トップヘッダー下に大きな画像を貼りたい方』にとっては嬉しい技でしょう。

ちなみに今回使用している画像の大きさは『1400×500』ですが、地球儀の下が少し切れて表示されてますね。こういう場合は画像の大きさや表示範囲を自分で調整する必要がでてきます。

とりあえず大きな画像をアップロードし、下のCSSを【追加CSS】にコピペ。これでどう表示されるかを確認してください。調整はそれから考えた方が早いです。

 

CSS
/*ヘッダー背景を画面に合わせて表示*/
#custom_header {
background-size:cover!important;
}

 

【background-size】背景の大きさを指定する命令で、他にも色々あるんですが、今回は【cover】を使用。これが『画像の比率を保持したまま横一杯に広がる』という命令っぽいですね(詳しくは知りません)

 

アイロンビーズでスカルミリョーネを作ってみました