画像を左端に固定せずに表示する方法

Question

ウィンドウ幅を変えてもトップ画像の左端が固定されずに、画像の中央部分を中心に表示させるにはどのようにすれば良いでしょうか。

現状は下記の通りにしています。

#top-photo{
  background-image: url(images/12345.jpg);
  background-size: cover;
  width: 100%;
  height:100%;

}

また、画面の高さを変えても画像が画面いっぱいに表示されるようにしたいので

height:100%;

としていますが問題ないでしょうか？
よろしくお願いいたします。

Answer 1

背景画像の配置基準が要素の中央に来れば良いという解釈でよろしいでしょうか？
それであれば、以下のようにbackground-positionを設定すればOKです。

#top-photo{
  background-image: url(images/12345.jpg);
  background-size: cover;
  background-position: center center; /*追加*/
  width: 100%;
  height:100%;
}

画面の高さを変えても画像が画面いっぱいに表示されるようにしたい

単純に#top-photoにheight:100%;を設定しても「画面の縦幅いっぱい」には広がらないので、
html,body{ height: 100%;}を追加するか、
もしくは#top-photoのheightを100%ではなく、100vhに変更するのが良いと思います。

Comments

[kizunami]

初心者の質問にもご丁寧にご回答いただきありがとうございます！とても助かりました！