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

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

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

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

CSS

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

Q&A

1回答

293閲覧

htmlとcssの質問です。

okaruto

総合スコア10

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/12/15 00:03

編集2022/01/12 10:55

htmlとcssの質問です。
cssファイルの中の"images/IMG_2064.jpg"画像ファイルを背景に表示した状態で、htmlファイル中の"images/sample1.jpg"画像ファイルを上から重ねて表示させたいです。
どうすれば良いのでしょうか。具体的なコードを記述していただけると助かります。
部分的なコードは下に記載しておきます。

css

1 2body { 3 4 background: #151515 url('../images/IMG_2064.jpg') no-repeat fixed left bottom; 5 background-size: cover; 6 color: #fff; 7 text-align: center; 8 font-size: 1.4rem; 9 font-family: Raleway, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 10}

html

1 2<section class="works"> 3 <h2 class="heading">WORKS</h2> 4 <div class="works-wrapper"> 5 <div class="work-box tree"> 6 <img class="work-image" src="images/sample1.jpg"width="700" alt="制作事例1">

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

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

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

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

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

yoshinavi

2018/12/15 00:33

質問は編集出来ますので、各コードをヘルプ等を参考にして、「コードブロック」として表示させてください。
okaruto

2018/12/15 00:58

ご指摘ありがとうございます。修正致しました。
sakura_hana

2018/12/15 02:13

現時点でも希望通りの動きになっていると思うのですが。「現状どうなっていて、どうなるのを希望するのか」をスクショ等で図示すると回答が付きやすいと思います。
Lhankor_Mhy

2018/12/15 02:59

現状でも『背景に表示した状態で、画像ファイルを上から重ねて表示』になっているかと思いますので、どのような問題が起きているのか、具体的にご提示ください。
okaruto

2018/12/15 04:43

"images/IMG_2064.jpg"画像ファイルが背景に表示されており、"images/sample1.jpg"画像ファイルが全く表示されない状態になっております。
sakura_hana

2018/12/15 04:55

1."images/sample1.jpg"が本当に存在しているか確認。 2.各要素(section, div 2つ, img)の大きさ・位置・透明度が正しく設定されているか確認してください。
Lhankor_Mhy

2018/12/15 04:57

ディレクトリなんですが、 HTML┬CSS    └images こんな感じになってますか?
m.ts10806

2018/12/15 05:40

タグにある内容そのままタイトルに入れても要件何も含まれていないのと同じなので質問内容に寄せたものにしていただけますか?
yoshinavi

2018/12/15 23:51

2つのjpg画像を背景として、2枚重ねたいとの事でしょうか?
x_x

2018/12/18 06:56

HTMLをCSS読み込み部分も含めて提示願います。
guest

回答1

0

記載されたコードそのままで試してみたところ、以下のような表示になりました。あなたがイメージしているものと一致していると思います。
イメージ説明

強いていえば、
誤? <img class="work-image" src="images/sample1.jpg"width="700" alt="制作事例1">>
正? <img class="work-image" src="images/sample1.jpg" width="700" alt="制作事例1">

…jpegファイル指定の直後半角スペースが抜けている程度ですが、少なくとも私のPC上では、誤?でも正常に動きました。(Mac Chrome)

あと気になるのは、画像の保存場所(参照)が、「IMG_2064.jpg」「sample1.jpg」で異なる点でしょうか。
・再度、保存場所と参照をチェックしてみてください。
・拡張子が大文字、小文字でもエラーになることがあります。拡張子も含め、ご確認を。

追伸:
少し趣旨とは異なるかもしれませんが、CSSでz-indexを使う方法もあります。背景画像と通常画像であれば、レイヤー関係は自ずと決まりますが、画像と画像で表示の重なり方を変えたい場合は有効です。
z-indexの使い方:CSSで重なり順を指定する

投稿2019/01/03 18:27

編集2019/01/03 18:40
otaai

総合スコア46

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問