背景画像の上の文字を背景との重なりのバランスを維持してレスポンシブに対応させるにはどうすればいいでしょうか。

Question

背景画像の上に文字を重ねて、デザインをしていますが
画面幅を変更すると、背景から文字がはみ出てしまったり、バランスが崩れてしまいます。
現在は、positionのrelative,absolutoでtopとleftでスマホ版のバランスを調整しましたが
幅を広げると、上記の現象がおきます。
何か方法があれば知りたいです。

また、このようなデザインにしたい場合は、背景画像にせずに画像の上に文字をpositionで載せる方が良いのでしょうか。
もしよろしければ、こちらの疑問も解決して頂ければ幸いです。

<div id="menu">
                <h1 class="menu-title animated">Menu</h1>
                    <div id="cut" class="animated">
                        <h2>CUT</h2>
                            <p><span class="type jp">シャンプー&ブローなし</span> <span class="price">¥2200</span> </p>
                            <p><span class="type jp">シャンプー&ブローあり</span> <span class="price"> ¥4200</span></p>
                            <p class="warning jp">
                                ※シャンプー&ブローありご希望な場合予約時にお伝え下さい。<br>
                                ※シャンプー&ブローなしのお客様は整髪料など付けないでご来店下さい。
                            </p>
                    </div>
                    <div id="color">
                            <div id="dye-young" class="animated">
                                <h2>COLOR</h2>
                                    <p class="jp">【おしゃれ染め】</p>
                                    <p><span class="type">SHORT&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="price">¥6000</span></p>
                                    <p><span class="type">MEDIUM</span><span class="price">¥6500</span></p>
                                    <p><span class="type">LONG&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="price">¥7000</span></p>
                            </div>

                            <div id="dye-elder" class="animated">
                                    <p class="jp">【白髪染め】</p>
                                    <p><span class="type">SHORT&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="price">¥5000</span></p>
                                    <p><span class="type">MEDIUM</span><span class="price">¥5500</span></p>
                                    <p><span class="type">LONG&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="price">¥6000</span></p>
                                    <p><span class="type jp">＋1000円でダメージの少ない薬剤に変更可能</span></p>
                                    <p><span class="warning jp">※肌が弱い方、髪をなるべく痛ましたくない方にオススメです。</span></p>
                            </div>
                    </div>
        </div>

#menu{
    height: 100vh;
    background-image: url("../img/menu.PNG");
    background-size: contain;
    background-repeat: no-repeat;
    color:#311204;
    position:relative;
    text-align: left;
    background-position: center center;
}

.menu-title{
    position: absolute;
    font-size: 93px;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 14%;
    font-family: 'Caveat', cursive;

}

#cut{
    position: absolute;
    font-size: 16px;
    left: 42%;
    transform: translate(-50%,-50%);
    top: 28%;
    width: 300px;
}

#dye-young{
    position: absolute;
    font-size: 16px;
    left: 42%;
    transform: translate(-50%,-50%);
    top: 47%;
    width: 300px;
}

#dye-elder{
    position: absolute;
    font-size: 16px;
    left: 42%;
    transform: translate(-50%,-50%);
    top: 59%;
    width: 300px;

}

#menu h2{
    font-size: 36px;
    margin-bottom: 1px;
    font-family: 'Caveat', cursive;
}

.type{
    margin-right: 30px;
    font-family: 'Caveat', cursive;
}

.price{
    font-family: 'Caveat', cursive;
}

.warning{
    font-size: 10px;
    width: 300px;
}

.jp{
    font-family: 'Noto Serif JP', serif;
}

Answer 1

ひとまず、単位を統一した方がいいと思います。

#menu{
    height: 100vh;

/* 略 */

.menu-title{
    position: absolute;
    font-size: 93px;

となっているので、背景画像の大きさは画面の大きさで変わりますが、タイトルの大きさは固定です。

すべてpx単位で固定すれば、画面サイズが変わってもページの大きさが不変なので、レイアウトがずれることがなくなります。そのかわり、画面からはみ出したり足りなくなったりします。

すべてvw（vh）単位で固定すれば、画面サイズに対しての割合で変化するので、画面からはみ出したり足りなかったり、ということはなくなると思います。そのかわり、スマホのような小さな画面で見た時に文字が小さくなりがちです。

Comments

[hemuu]

ありがとうございます。
pxとvhの特性について、とても分かりやすくご説明頂けて幸いです。

①背景画像の上に乗る文字配置のバランスを保ちつつ、画面からはみ出さないように
レスポンシブ対応にする方法はございますか？

②背景画像ではなく、通常の画像にposition:relativeなどを使って、文字配置を固定し、その画像が画面幅に応じて縮尺するように、imgに対して100vhを指定するなどをするのが良いのでしょうか。
（この時の、単位は何を使うのが良いのでしょうか。

宜しければご教示頂きたく存じます。

[Lhankor_Mhy]

①について、「画面からはみ出さない」という条件ですと、画面が余るということになりますが、それでいいですか？

②について、どちらでも同じ工夫が必要になると思いますので、お好きな方でいいのでは。

[hemuu]

①について
画面からはみ出さないというより
containerの画面幅に設定された
背景画像をはみ出さないようにという具合です。

メニューの台紙の様な背景画像を設定して
その上に文字を乗せ
一枚のメニュー表の様なものを表現したいです。

画像に対しての文字のレイアウトは変えずに、かつ背景画像の範囲を文字がはみ出ない様にしたいです。

伝わりますでしょうか。
もし、引き続きアドバイス頂けるなら
お願いいたします。

[Lhankor_Mhy]

つまり、横幅が基準となるのですね。
それであれば、単位をvwに統一するのがいいと思います。