背景画像がコンテンツに重なってうねりがある場合の対処法

Question

お世話になります。
例えば画像のような背景（うねりがある背景で、コンテンツにきっちり重なる。道順説明みたいな・・）でコーディングを依頼された時、
かなり難しいと思うのですがスムーズにコーディングすることは可能なのでしょうか。

コンテンツ幅をきっちり決めて、それ以上ブラウザ幅を広げると端のデザインがちぎれてしまうと思うのですが、
ブラウザ幅を広げても背景がずれずにコーディングすることは可能でしょうか。

1枚画像に書き出す以外でできることがあればご教示お願いしたいです。

細かく書き出して地道にポジションを設定するしか無いでしょうか。

私はデザインするだけの案件（別会社にコーディングを依頼するらしいのですが）、
WF通りにコーディングできるのか？と思いまして質問させていただきました。

Answer 1

コンテンツ幅をきっちり決めて、それ以上ブラウザ幅を広げると端のデザインがちぎれてしまうと思うのですが、
ブラウザ幅を広げても背景がずれずにコーディングすることは可能でしょうか。

レスポンシブ対応にするなら、自分なら下記にような設計にするかな。

モバイル用(例えば800px以下)は別レイアウトにする。（コンテンツが重なってしまうため）

PC用は、
800px～1200pxは幅はブラウザ幅いっぱい(100%)で可変、1200px以上は1200pxで固定、
高さは固定。

コンテンツの位置は、 幅 800px～1200pxの間は、左位置を vw単位で指定するといい感じになりそうですね。

サンプル

フルビュー

ブレークポイントはコンテンツのサイズや位置で適切に調節してください。

Comments

[takamiii_158cm]

vw単位で指定!良いですね。
高さ固定も参考になりました。

Answer 2

---この場合、最も懸念する問題はウィンドウ幅を広げた時ではなくスマホの時です。
広げる分には問題ないのですが幅を狭めたスマホの時にユーザーの利便性も考えて根本的な修正（レイアウトや背景画像）が必要になります。

ちょっとうまく言葉がまとめられないのですが自分が今思いつきで浮かんだものは以下の通りです。

1, PC用とSP用で分ける(分岐点は1000pxで作る)
2, PC用は1000px固定で作る（これ以上大きい場合は左右に余白を入れるためwidth: 1000px;margin: 0 auto）
3, SP用は...別のデザインにした方が吉かと

Comments

[takamiii_158cm]

ご回答ありがとうございます。
確かにスマホの時は私も気になっておりました。（お客様が現在スマホWFを作っているところです）
max-widthを使ってブラウザ幅をめいっぱい広げた時にコンテンツと背景がきっちり重なるのか気になりますがどうでしょうか・・？多少はずれますでしょうか。

[kyoya0819]

ちょっとうまく説明ができてませんでした。
最もわかりやすい例は横幅1000pxの画像を表示する時です。
その画像の中で絶対値で設定していけば不可能ではないです。

[kyoya0819]

ちょっとサンプル作ってみます。

[takamiii_158cm]

お手数をおかけいたします。誠にありがとうございます。

[kyoya0819]

デザイン性もへったくれもないですが幅を変えても同じ位置に保持されるはずです。

コード
https://codepen.io/asuchi0819/pen/bGGBzWW

フルビュー
https://cdpn.io/asuchi0819/debug/bGGBzWW/XBrGRqoqwmvM

[kyoya0819]

1000px未満の端末では崩れてしまうので非表示にしてあります。

[kyoya0819]

ちなみにこんなこともできます。

コード
https://codepen.io/asuchi0819/pen/NWWboXa?editors=1100

フルビュー
https://cdpn.io/asuchi0819/debug/NWWboXa/yYAyLJDJGzDr