質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

658閲覧

背景画像を表示させたい

sirokuro

総合スコア11

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/04/20 09:23

画像1枚をページ全体に背景画像として設定したいと思っております。そのために、<body>タグに、background-imageプロパティを用いて書きましたが、表示されませんでした。
その後、body{}を試験的に .class名{} で試したら表示があり、パスの綴りミスの可能性が低いと思われます。一応、backgroundプロパティの後ろに、width height background-size background: など、やってみましたが、変化なし。
クラスセレクタ指定では表示され、bodyタグ指定では表示されないのは、何が原因にあるでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

思いついた可能性を書いてみます。参考になれば幸いです。


**[1] bodyにstyle="background-image: url();"で背景画像を指定している場合 **
ファイルについて以下を想定し、画像のパスについて念のための確認です。
/css/style.css
/img/bg-body.jpg
index.html

CSS

1/* style.css内の記述 */ 2.aaa { 3 /* こちらだと表示される */ 4 background-image: url(../img/bg-body.jpg); 5}

HTML

1<!--index.html内の記述 --> 2<head> 3 <link rel="stylesheet" type="text/css" href="css/style.css"/> 4</head> 5 6<!-- CSSの記述をそのままもってきてもリンク切れになる --> 7<!-- <body style="background-image: url(../img/bg-body.jpg);"> --> 8 9<!-- HTMLファイルにリンクを書く場合、CSSファイル内のパスとは書き換えることが必要 --> 10<body style="background-image: url(img/bg-body.jpg);"> 11

[2] CSSの記述の順番

CSS

1body { 2 background-image: url(../img/bg-body.jpg); 3} 4 5... 6 7/* あとで読み込まれるような記述で以下のような記述があれば、background-imageの記述は上書きされて消えてしまいます。 */ 8body { 9 background: #fff; 10} 11

投稿2020/04/20 10:01

new1ro

総合スコア4528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sirokuro

2020/04/20 11:06

HTMLのbodyタグに直接書き込む方式にしたら表示されました!! ありがとうございます!!
guest

0

bodyより前面に背景色を指定している箇所があるのでは。

投稿2020/04/20 09:24

編集2020/04/20 10:22
kei344

総合スコア69606

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sirokuro

2020/04/20 11:10

background-color指定は指定せずでこの現象が起きてしまい・・。ちなみに、試しにこのプロパティ使用して背景色変えられるかも試してみましたが、変化なしだったので不思議です...。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問