Q&A
コードをご提示ください。
Wordpress固定ページの背景画像をCSSのbackground-imageで指定してみましたが、一部分しか見えない現象について教えてください
超初心者です…場違いでしたらすみません。
【固定ページのカスタムCSSに】
body {
background-image: url("画像のURL");
background-size: cover;
}
【本文のHTMLに】
<body>ああああ</body>と入力しましたが、一部分にしか背景画像が写りません><
（添付画像）
原因分かる方、教えてくださいませ(>_<)
ああ、wordpress なんですね。
では、テーマを教えてください。テーマをカスタマイズしているならば、カスタマイズした部分をご提示いただくか、公開されている実際のページをURLをご提示ください。
ご親切にありがとうございます。大変恐縮です。
テーマはTCDの「https://demo.tcd-theme.com/tcd039/?page_id=675」を使用し、テーマのスタイルシートはいじっておりません。
画像2つ目の、固定ページ下にあるカスタムCSSに入力したものです。
また、本文のHTMLも画像3つ目に追加いたしました。
実際のページURLはこちらです。
どうぞよろしくお願いいたします。
URL拝見しました。
KazuhiroHatano さんのご回答の通りです。
ご親切にありがとうございました、お陰様で思った通りのページが出来上がりました。
的確なご指示、本当にありがとうございました！！
回答2件
0
ベストアンサー
まずブラウザで問題部分を右クリックして「要素を検証」や「詳細を表示」などで
実際にHTMLの構成がどのようになっていてどのようにCSSが適用されているか調べましょう
固定ページの編集画面にbodyタグを書いていることも間違いですが
みたところ#main_contentsにbackground:#fffが書かれているので
コンテンツの白背景がbodyの背景の上に乗っかってるだけです
投稿2020/10/12 02:32
総合スコア7804
ご教授頂きありがとうございます！操作したことのない部分でしたが、なんとか形にすることができました！明解なアドバイスに感謝申し上げます！
0
css
1background-size: cover;
こちらの影響かと。上記URLで値を切り替えた場合の見え方が確認できます。
また
background-image
- background …… 背景に関する指定をまとめて行う
- background-attachment …… 背景画像の固定・移動を指定する
- background-color …… 背景色を指定する
- background-image …… 背景画像を指定する
- background-position …… 背景画像の表示開始位置を指定する
- background-position-x …… 背景画像の横位置を指定する（IE独自の仕様）
- background-position-y …… 背景画像の縦位置を指定する（IE独自の仕様）
- background-repeat …… 背景画像のリピートの仕方を指定する
等バックグランドに対しての指定は様々あります。
ご参考までに...。
投稿2020/10/11 08:58
総合スコア2506
MDNによれば、cover は「画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。」という仕様ですので、背景画像がない領域は残らないはずです。
contain と混同されていませんか？
誤回答のように思えますので、低評価します。
background-size: cover;
→ 背景画像が（縦横比を保ったまま）描画領域全体に広がって表示されている
background-size: contain;
→ 背景画像が（縦横比を保ったまま）画像の持つサイズで表示されている
の認識です。
今回の質問者様の場合、指定bodyで描画領域全体に広がって表示されている為
覆いかぶさるタグで必要な部分が表示されない。
よって
background-size: contain;
等で領域全体に広げずbackground系CSSで位置等で調整してみてはどうか？という内容なのですが、
内容的におかしかったですか？
質問は要素全体に背景画像を置きたいということであって、子要素をよけて背景画像を置きたいというものではないと思います。
また、万が一、kuma_kuma_さんのおっしゃる通りだとしても、単純に background-position を使えばいい話で、background-size: cover に原因はありません。
> 質問は要素全体に背景画像を置きたいということであって、子要素をよけて背景画像を置きたいというものではないと思います。
どこまで避けるのか、また他のタグを透過する方法もありますので
元々のCSS指定が不明の為参考URLを元にして表示されたい内容を確認されては？
(background-size: cover だと今度は画像の下が切れるように見える恐れがある)
そのあとbackground系のCSSをいろいろ試されては？
という意味なんですが...
Lhankor_MhyさんのCSSに対する知識量で私が完全に劣っているのは判っています。
それでは誤解の無いよう「編集」で消しておきますか？
さて、どうでしょう。
kuma_kuma_さんのお考えの方が正しいということも十分にあるわけですから、消す必要はないのではないかと思います。
Lhankor_Mhyさん
本当に嫌味とかではなくCSSの知識量からするとあなたに私が敵わない事は理解しています。
なのでLhankor_Mhyさんからのお話はすごく勉強になっています。
なので指摘は全然かまいません。
自分の考えを書きましたが質問者様への回答が不適切の場合陳謝して取り消しますので、
その場合はおっしゃって下さい。
ご丁寧にありがとうございます。
まあ、そもそも
---
【本文のHTMLに】
<body>ああああ</body>
と入力しました
---
とあるので、bodyタグの使い方を間違っている可能性が否めず、CSS以前の問題かもしれませんね。
あなたの回答
tips
プレビュー
