背景画像を中心固定で、デバイスごとに表示される横幅を変更したいです。

Question

top画面の背景画像をデバイスに合わせたいです。

背景画像を中心固定で、デバイスごとに表示される横幅を変更したいのですが、
bodyサイズより横幅が長いので、body自体がずれてしまいます????

画像サイズ固定で合わせるのではなく、
横幅の大きな画像を、画面幅が小さいデバイスでは両サイドをカットしたいです。

デバイスごとのwidthに合わせて、
中心だけ固定で両サイドを表示・非表示させる方法をご存じの方いらっしゃいますか？

下記top-imageの背景に適用させたいです。

<header>
<div class="mobile">
      <div class="nav">
        <div class="hum">
          <div class="title">
            <p>寿司創作 dining 魚魚（とと）</p>
          </div>
          <img src="mobile-images/hum-menu.jpg" alt="">
        </div>
      </div>
      <div class="top-image">
        
        <div class="top-logo">
          <img class="mobile-logo" src="mobile-images/mobile-logo.png" alt="">
        </div>
      </div>
    </div>
  </header>

header{
      background-image: url(../mobile-images/mobile-top-back.jpg);
      background-size: 346px 443px;
      background-repeat: repeat-x;
    
  
      .nav{
        width: 100%;
        height: 65px;
        position: absolute;
        z-index: 2;
        top: 0;
        background-image: url(../mobile-images/mobile-header.jpg);
        box-shadow: 0px 3px 6px rgba($color: #4A3A2A, $alpha: 1);
    
        .hum{
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: 100%;
          
    
          .title{
            @include font(20px);
            margin: 0 auto;
          }
    
          img{
            width: 65px;
          }
        }
      }
    
      .top-image{
        margin: 0 auto;
        width: 375px;
        height: 443px;
        background-image: url(../mobile-images/mobile-interior-top.jpg);
        background-repeat: no-repeat;
        background-size: 376px;
        position: relative;
        z-index: 1;
    
    
    
        .top-logo{
          position: absolute;
          top: 143px;
          left: 56px;
          //width: 376px;
    
          .mobile-logo{
            width: 263px;
            margin: auto;
          }
        }
      }
    }

Comments

[hatena19]

現状のHTMLとCSSのコードを提示してください。

[music]

失礼いたしました。
コード記載しました????
よろしくお願い致します。

[hatena19]

現状、.top-image は
width: 375px;
height: 443px;
と固定にしてますが、幅を画面幅に合わせたいということでしょうか。
width: 100%;

[music]

勉強不足なのでいろいろ試していて、
出来なかったので取り合えずカンプのサイズに直したものです????

[music]

例）width1000pxの画像を、width600pxのデバイスで表示させる時、
中心で固定して、両サイド200pxづつを非表示にしたいということです！

現状左に寄ってしまい、余りの400px分飛び出てその下は空白になってしまいます。

[hatena19]

画面幅1000px以上の場合はどうするのですか。
例えば、1600pxなら、画像は1000px固定で、左右に300pxずつの余白ですか。
それとも、画像を1600px幅まで引き延ばしますか

高さはどうしますか。固定ですか。それとも画像の縦横比を維持しますか。

[music]

高さは固定で、横幅も固定なのです。
画像幅以上になっても画像幅は固定のままです。

一番下の背景をリピートさせているので、今回の画像幅を超えたら
左右に最背面の画像が出てきます。

[hatena19]

回答しましたので、参照ください。

[music]

うまくいきました！！！ありがとうございます！

ちなみに、今回修正して頂きましたtop-imageの中に
top-logoがありますが、そのimgを中心に位置させるには
どのようにすればよいでしょうか？？

現状absoluteで指定しておりますが、
画面幅が変わるとleftからの距離が変わってしまいます????

[music]

背景画像とlogoイメージを一つの画像ファイルにした方がよよいのでしょうか？

[hatena19]

absoluteを使うなら、

.top-logo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

[music]

できました！！！
ご丁寧にご指摘・修正して頂きまして、ありがとうございます！

Answer 1

ご希望のことを把握できてないかもしれませんが、
下記のような感じでしょうか。

//前略

  .top-image{
    margin: 0 auto;
    max-width: 376px;                //追加
    width: 100%;                     //修正
    height: 443px;
    background-image: url(https://picsum.photos/1200/800?random=2);
    background-repeat: no-repeat;
    background-size: 376px;
    background-position: top center; //追加
    position: relative;
    z-index: 1;

//攻略

※376px; は画像の幅にしてください。