backgroundでブラウザを両側から非表示にしたい

前提・実現したいこと

backgroundでブラウザを両側から非表示にしたい
backgroundを使用して、ブラウザを狭めた時に、右側から非表示になるのではなく、両方から非表示にしたいです。
また一定の幅になったときに左側から非表示になるのが止まり、右側からだけ非表示になるようにしたいです。

発生している問題・エラーメッセージ

backgroundでブラウザを両側から非表示にしたい

該当のソースコード

<body>
  <div class="wara">
  <div class="wrappar"></div>
  </div>
</body>


.wara{
  width: auto;
  padding-left: 50%;
  margin-left: -630px;
}
.wrappar{
  background-image: url(../img/bg-about.jpg);

  width: 1260px;
  height: 300px;
  max-width: 100%;
  background-clip: content-box;
  
}

試したこと

ここに問題に対して試したことを記載してください。
https://qiita.com/yu-smc/items/2ace07b3439a80154021
このサイトを参考にしましたが、backgroundを使用することで、できるらしいので、そちらの方法を使用したいです。

補足情報（FW/ツールのバージョンなど）

HTML　CSS
ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

下記のような感じでどうでしょうか。

css
1.wrappar{
2  background-image: url(https://placehold.jp/1260x300.png);
3  background-position: center;
4  margin: 0 auto;
5  width: 1260px;
6  height: 300px;
7  max-width: 100%;
8}
9
10@media (max-width:800px) {
11  .wrappar{
12    background-position-x: -230px;
13  }
14}

画面サイズ800px以下で左側固定です。

投稿2020/11/10 04:35

総合スコア33790

2020/11/10 04:47

ブラウザを狭くしたときに、基本右側から飲み込まれるようになると思うのですが、それを両方から飲み込まれるようにしたいのです。こちらが載せたサンプルは一応両方から飲み込まれるようになってますが、一定の幅、例えば画像幅1000ｐｘまでは両方飲み込まれるようにして、残りは左側から飲み込まれるようになる。みたいな感じにしたいのです。説明下手ですみません