【background-image】レイアウト崩れについて

Question

HTML,CSSの初心者です。
background-imageを使用して、現在背景を作成しようとしておりますが、
画面幅を変更すると、レイアウトが崩れてしまいます・・
widthやheightの設定してどうにか出来ないか考えたり、調べたりしましたが、
自分では解決に及びませんでした。。
今回だけでなく、他でも同様のことで悩んでおりますので、
レイアウトの固定について教えて頂けるとうれしいです。

↑こちらが現在作成中の幅400で設定したSP版です。

こちらの幅を大きくすると、

背景の黄色とオレンジがズレる点で悩んでおります・・

コードの一部を抜粋させていただきます。
よろしくお願いします。

<div class="realive_maintext1">
  <p class="maintext1">
      お子さんと一緒に外食する時間を<br>
      大切にしませんか？<br>
  </p>
  <p class="maintext2">
        子連れのご家族・お友達の方との<br>
        食事のお店探しにお役立てください。
  </p>
</div>

.realive_maintext1{
  margin-top: 50px;
  height: 200px;
  width:100%;
  background: url('images/orange.png') no-repeat ,url('images/yellow.png') no-repeat 50px -50px,url('images/orange.png') no-repeat 260px -30px,url('images/yellow.png') no-repeat 180px -20px;
  background-size:40%,50%,35%,50%;
}

.maintext1{
  font-size:130%;
  font-weight: 800;
  text-align: center;
  margin-top: 10%;
}

.maintext2{
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  margin-top: 40px;
}

Comments

[Lhankor_Mhy]

「レイアウトが崩れてしまいます」とは、具体的には何が起きていますか？

[K_3578]

teratailではソースコードはMarkDown方式でコードブロック化してご提示ください。

書き方が分からない場合は下記質問の回答を参考にしてください。
https://teratail.com/questions/238564

[hatena19]

どのようなレイアウトを希望していて、どのように崩れているのか、言葉で説明するのは難しいかも知れませんので、現状の画面のスクリーンショットと、希望のレイアウトの画像を提示されてはどうでしょうか。

[chamco06]

ありがとうございます。修正させて頂きましたので、可能であれば確認頂けると嬉しいです。

Answer 1

画面幅を変更することで、背景画像のレイアウト（各画像の位置関係）がずれる原因は、下記です。

要素の幅が % で可変、高さが px で固定されている。
背景画像のサイズが % で可変、位置が px で固定されている。

つまり、相対値と固定値が混在しているので、相対値は画面幅に応じて変化するのに、絶対値は固定のままなのでレイアウトがくずれます。

画面幅に応じてサイズが変化して、位置関係もくずれないようにするなら、vw単位を使えばどうでしょうか。

下記のサンプルは、
細かいレイアウトは不明なので、数値は適当です。ご希望に合わせて調整してください。

.realive_maintext1{
  margin-top: 50px;
  height: 50vw;
  width:100%;
  background:
    url('images/orange.png') no-repeat,
    url('images/yellow.png') no-repeat 12vw -12vw,
    url('images/orange.png') no-repeat 65vw -7vw,
    url('images/yellow.png') no-repeat 45vw 5vw;
  background-size:40vw,50vw,35vw,50vw;
}

Comments

[chamco06]

早速のご回答ありがとうございます。
vwについて勉強不足でしたので、改めて内容を理解した上で利用してみたいと思います。
勉強不足で大変申し訳ないのですが、今回、widthは100％のままですが、こちらはvwの単位に変更しなくても良いのでしょうか？
もし今回、vwを使用しないのであれば、要素の幅、高さ、サイズ、位置の単位を統一するべきということでしょうか・・？

[hatena19]

相対的な位置関係を維持するなら、単位の統一は必要だと思います。pxなどの絶対値では画面幅に追随して変化させるのは難しいので、メディアクエリで段階的に変化させるか、スクリプトで変化させることになります。
一番簡単なのは、背景に複数の画像を使わずに、一つの画像にまとめたものをbackground-imageに設定するようにすることだと思います。

[chamco06]

＞一番簡単なのは、背景に複数の画像を使わずに、一つの画像にまとめたものをbackground-imageに設定＞するようにすることだと思います。
こちらとてもしっくり来ました！ありがとうございます！

今後、相対的位置関係の維持を求めていくのであれば、単位の統一（高さ、幅？、サイズ、位置）を意識して作業します。ありがとうございました。