- ベストアンサー
スマホに合わせた背景画像の表示について
wordpress初心者の者です。 wordpressの固定ページで、画面いっぱいの背景画像を配置したのですが、当然スマホでは画像サイズが大きすぎて、左右が切れて表示されてしまいます。 これを回避するのは「Media Queries」を利用するしかないのでしょうか？ もしくはプラグインなど簡単な方法がありましたら、教えてください。
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
例えば背景を指定しているcssに background-size:100% auto; という指定を追加すれば、横幅はブラウザ幅に合わせて可変になります。 縦との関係もあるので万能ではないですが。 その他、jsを使えばスマホの場合に読み込む背景画像を変える様な事も出来ますが、 それよりはメディアクエリで分ける方が簡単だと思いますよ。
関連するQ&A
- 背景画像を左右に表示
今ＨＰを作っているのですが、 背景画像をページの左右両端に配置してそれを繰り返す、というのはどうやればいいのでしょうか？ ソースのサンプルを教えていただけないでしょうか？ いろいろ検索してみましたが、見付かりませんでした。 よろしくお願いします！
- 締切済み
- HTML
- CSSで背景画像設定
ページ自体はテーブルで位置を特定しています。 中央に750ピクセルのテーブルを配置しその中にコンテンツを入れています。 さて、背景画像を固定にしたいと思っています。 場所なのですが、ブラウザサイズに左右されない下部分・中心から375右の位置が右端になるようにしたいんです。 いわゆる「中央に750ピクセルのテーブルを配置しその下部分に画像を配置」した状態で、なおかつ固定としたいんです。 このような言い回しでわかっていただけたでしょうか? CSSで右下に配置ってのはやったことがあるのですが、「中央から375ピクセルの位置が右端」なんてことが可能なのでしょうか? 方法があれば教えてください。
- ベストアンサー
- HTML
- 画像の回り込みと、見出しの背景画像について
Wordpressで見出しの背景に画像を設定していて、メディアを追加でイメージを設置し、設置したイメージを左寄せにした場合、見出しと段落は回り込むのですが、見出しに設定してある背景が画像の裏に残ってしまうのを回避するCSSの指定はどうすれば良いでしょうか？
- 締切済み
- CSS
- 背景に画像を置きたい
トップページの背景に、別で作った画像を置こうとしてるんですが、その画像サイズが大きすぎるため、ページ一杯に表示されてる状態で、はいりきらない部分が切れてしまいます。。 背景の大きさにぴったり合うサイズって何×何でしょうか？リサイズしようにも、ぴったりのサイズがわからなくて困っています。アドバイスお願いします。
- 締切済み
- HTML
- 縦長の画像をスクロール、背景固定
Wordpress Stinger5を使っています。 トップページの高さが3000px 画像の高さが1500pxです。 この画像を背景にし、ページの上部に表示し、 下にスクロールして、背景画像が途ぎれるときに 背景が画像が固定する方法が知りたいです。
- 締切済み
- CSS
- 背景画像の表示について
こんにちは。 初心者ですが、Yahooのジオシティーズでホームページを作っています。 今、頭を悩ませている要因が、背景画像についてです。 自作した画像があるのですが、それをアップデートしたURLでは、画面に収まりきるサイズだったのです。 でも、いざトップページに配置したら、なぜか勝手に拡大表示されている上に、スクロールバーが出ていません。 おかげで上下左右が見切れ、画像も荒くなってしまいました。 さらに、画像の繰り返しをしない設定（background-repeat:no-repeat；）をしたにもかかわらず、反映されていませんでした。 HTMLタグでもスタイルシートでも試してみましたが、同じような結果です。 イメージで配置したところ、サイズは同じように拡大されてしまいましたが、スクロールバーは出ました。 私の理想とする設定は、 【作ったままのサイズで 右端中央にひとつだけ表示し 画面サイズを超えてしまったパソコン(小さいノートパソコンなど)ではスクロールバーが表示される】 といったところでしょうか。 初心者なりに勉強して、HTMLやスタイルシートについては多少なりとも理解できるつもりです。 どうか、ご教授願います。
- 締切済み
- HTML
- スマホの背景画像について
タイトル通りスマホの背景画像について質問です。 初めて作成するので、まずはいろいろ調べたところ縦向きが320px で 横向きが480pxなので一般的にデザインカンプを作る際は320pxで作る ようなのでその通りにしております。 縦向きの場合には、サイズが合っているので表示もおかしくないのですが 横向きにしてしまうと間が空きます。 こんな問題があるので、できるだけ画像は使わないようにとのこともありますが 背景画像を使う場合、うまく表示できる方法はありますか？ 例えば、480pxで背景画像を作りcss3のbackground-sizeを使い縦向きであれば 320pxで横向きであればそのまま表示させるようにするとか思いついたのですがこの 方法はありでしょうか？
- ベストアンサー
- HTML
- ホームページビルダーで背景画像がうまくいかない
ホームページビルダーでＨＰを作成している初心者ですが、どうも背景画像がうまくいきません。 どこでも配置モードで製作しているのですが、背景画像の大きさ（範囲）を指定できないものでしょうか？編集→ページのサイズ→８００×６００等を選んでも、背景画像の範囲が限定されるわけでもなく、画面いっぱいに背景画像が映し出されます。 ちなみに、挿入→画像ファイル→ファイルから壁紙として このやり方で背景画像を設定すると、ぺーじ編集画面ではしっかりと背景画像が表示されるのですが、プレビューでは背景が表示されない不具合が出ました。（検索してみると同じ不具合が出る人が数人見つかり、一つだけ解決策が見つかったのでそれを実行しています。 http://www.aimix.jp/hpboldlog2/old3594.html の一番下のやり方です。） 最悪、背景の問題が解決できなければ、ページの中央表示で妥協しようと思っています。 で、標準モードで製作していれば簡単にページの中央表示（真中寄せ）ができるようですが、今どこでも配置モードで製作していますので、どこでも配置モードで中央表示する方法はありませんか？ できれば全てにおいてhtmlタグは極力直接入力は避けたいです（わけがわかっていないので・・・） お詳しい方よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- Dreamweaver CS3で背景画像が表示されません
セールスレター（ホームページ）の背景に画像を使いたいので ＣＳＳの「body」から背景→背景イメージの欄に使用したい画像を設定しています。 理想はグラデーション画像なのですが、 どんな画像を入れても表示されません。 （グラデーションでないものも、ファイルサイズ等に関係なく表示されません） jpg画像で同じフォルダ内に入っています。 背景色は問題なく表示されます。 ホームページ内の背景でない部分はdivで囲み影画像を背景にしてあります。 （幅680px,高さ指定なし マージン：左右自動、上下０ 影の画像をＹ軸にリピート） body：（幅高さ指定なし、マージン上０、背景に入れたい画像） ページプロパティから背景画像を指定した場合は表示されますが、 ページのＴＯＰのみグラデーションのある画像にしたいため リピートするとグラデーションが何度も繰り返されてしまいます。 そのため「固定」を使うためにＣＳＳを使用しなければならないと思い ＣＳＳで表示する方法を探しております。 初心者なので何か初歩的なミスをしているかもしれません。 よろしくお願い致します。
- ベストアンサー
- CSS
- 背景画像にリンク
背景に画像を固定して表示したページに、リンクを貼りたいのです。 フレームページで縦に２分割、左のページにスタイルシートで背景固定、BODYタグ内には何もなし、右のページも同じくスタイルシートで背景固定、こちらに左のページの背景画像内にある文字からリンクを貼り、そのリンクをはったページを右ページ内に反映させたいのです。 一枚の大きな画像を２分割して左と右のページでそれぞれ固定しているので、IMGタグはなるべく使いたくありません。 （IMGタグでスタイルシートでの背景固定ように、right bottomと出来るのならば全く問題ないので、その場合は教えてください＾＾；）
- 締切済み
- HTML
お礼
親切丁寧なご回答ありがとうございます！ pcは横長、スマホは縦長なので少し工夫する必要がありますね。 おかげさまで問題が解決しました。