Edit your comment 名前 (必須) タイトル URL (必須) こんにちは。 なるほどー (´・ω・`) この画像は圧倒的に今回の用途には不向きです。何故ならこの類の画像はasbtract image(抽象)といって、全体を見ないとその雰囲気が伝わらないからです。 お伝えした通り、今回の表示範囲は(短い丈が) [太字]10px[/太字] とかなり狭い(細い) ので、どのように配置しても恐らく納得行く形にはならないと思います。そしてrepeat(埋める範囲に満たない場合に繰り返して表示させる)すればシームレスではないため当然継ぎ目が目立ってしまいますね。 たぶんどう配置しても「これならCSSのグラデーションで良いのでは?」という結果になるような気がしますが、それを踏まえて以下の通り作業を行ってください。 ------- htmlは触りません。スタイルシートに集中してください。 #whole-container { で検索すると2箇所あります。最初のものが対象です。このルールセットを #whole-container { display: flex; justify-content: center; background: white; position: relative; z-index: 3; } に変更。 続いて上記内容のすぐ下に以下の内容2ルールセットを追加(アドレスは忘れずに書き入れてください) #whole-container::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 160px; background: url(画像アドレス); } #whole-container::after { content: ""; display: block; position: absolute; top: 10px; left: 10px; z-index: -1; width: calc(100% - 20px); height: calc(160px - 10px); background: #fff; } 続いて #banner { で検索すると1箇所ありますので、このルールセットを以下の内容に変更 #banner { position: relative; margin: 45px auto 0; width: calc(100% - 20px); background: linear-gradient(to bottom, transparent 0, transparent 10px, rgb(255,82,162) 10px, rgb(255,82,162) 100%); padding: 5px 0 250px; text-align: center; } 続いて上記内容のすぐ下に以下の2ルールセットを追加。 #banner::before { content: ""; display: block; position: absolute; top: 0; left: -10px; z-index: -1; width: calc(100% + 20px); height: calc(100% + 10px); background: url(画像アドレス); } #float-container { position: relative; } --------- ここまでが基本の作業です。で、利用する画像の縦横サイズは置いておき、「容量」が約400KBと大きすぎますので、容量の削減(圧縮)を行ってください。でないと現時点で和田さんのページは画像の容量が1枚あたり約1MBと非常に大きいので、さらにページが重たくなってしまいます(今後画像を掲載する際は「削減」をされた方が良いと思います) 削減というのは画像を縮小することではなく、その容量のみを軽量化することを指しています。画像の解像度を極力保った上で削減(ロスレス圧縮)することは可能ですからご検討ください。 第三者の冷静な意見として受け取って頂きたいんですが、和田さんのブログの現状は「表示が遅くて重たい」です (∵`) 参考記事: 画像を圧縮して軽くするおすすめサイト「Tiny PNG」 https://vanillaice000.blog.fc2.com/blog-entry-208.html -------- ここからは、これまでの作業内容を終えて、背景画像の表示位置を調整したい場合の追加作業です。 画像の横幅が1191pxなので、ブラウズサイズ横幅がこれを超えた場合(つまり画面の大きいPCで見た場合)は自動的に画像が繰り返しになります。継ぎ目はくっきりと目立ちます。これが嫌だという場合には #whole-container::before の background: url(画像アドレス); を background: url(画像アドレス) center center /cover no-repeat; に変更してください。 また。上記の指定は「画像の縦中央と横中央を表示起点とする」という内容なので、表示位置をずらしたい場合には、最初のcenterが縦位置で、「top」または「bottom」への変更が可能です。言葉ではわかりづらいと思いますので実際に変更して目視確認を行ってください。 2つ目のcenterは横位置で、「left」または「right」への変更が可能。 また、さらに細かい調整をしたい場合はpxを利用することもできますが、原寸を考慮する必要がありますのでおすすめしません。 とりあえず一度お試しください。 本文 (必須) パスワード 管理者にだけ表示を許可する 送信 削除