[戻る]
No.7233

ヘッダの背景画像

青いホタテさん  投稿日:2024/07/03(Wed) 15:51
key

トップページのヘッダ部分の背景画像について質問です。

現在、横長の背景画像を使用しています。
画面の表示が100%の状態だと1枚の背景画像が画面いっぱいに表示されます。
ブラウザのズームアウト、Ctrl+マウスホイールなどの操作をして、
画面の表示を縮小(100%以下に)すると、背景画像が連続して複数つながった状態で表示されるようになります。


画面の表示を縮小しても拡大しても1枚の背景画像が画面いっぱいに表示されるようにしたいのですがどうしたらよいでしょう。

Re: ヘッダの背景画像

おたすけマイショップさん  2024/07/04(Thu) 09:55 No.7240
key

恐れ入りますが、ブラウザの倍率に関係なくショップページの横幅いっぱいに1枚の画像を表示させることはできません。
背景画像の繰り返し表示を避ける場合、拡張設定>デザイン設定>レイアウト>ヘッダーの歯車>最大幅サイズを
アップロードする背景画像に設定してください。
※ブラウザの拡大/縮小率によっては両側に余白が生じる、画像が繰り返し表示される可能性がございます。
※端末によって画面幅が異なりますので、アップロードする背景画像と設定する最大幅にある程度差を持たせることをお勧めいたします。
 (例 最大幅サイズ:1500pxならアップロードする背景画像は2000px等)


上記とは異なり、以下スタイルの追加にて背景を繰り返さず、ブラウザの拡大/縮小率に応じた背景画像を表示させることは可能です。
ただし、ブラウザの拡大/縮小率や端末の画面幅によっては背景画像の一部のみ表示となる、背景画像が拡大/縮小される可能性がございますので予めご了承ください。

.pane_head{
background-size: cover!important;
background-repeat: no-repeat;
}

スタイルの追加方法は以下をご参照ください。

 サイトにCSS(スタイルシート)を追加する
 https://emshelp.easy-myshop.jp/c-item-detail?ic=site-style


Re: ヘッダの背景画像

青いホタテさん  2024/07/04(Thu) 10:37 No.7241
key

ご返答いただきましてありがとうございます。
教えていただいた方法を試してみましたら、解決できました。
ありがとうございます。



返信
*おなまえ
*email (回答通知用。公開されません)
*タイトル
*内容
ショップURL
*key (修正の際に使用します)

無料で本格的なネットショップ開業できるのは『イージーマイショップ』