画像の中に画像を挿入する方法について

HTMLとCSSで全画面表示の画像の中に画像を挿入したいのですが、そうすれば挿入できますでしょうか？

HTML
1<body id="index">
2  <header>
3    <h1 class="heading">
4      <a href="サンプル.html">
5      </a>
6    </h1>
7    <div class="social">
8      <i class="fab fa-facebook-square"></i>
9      <i class="fab fa-twitter-square"></i>
10      <i class="fab fa-instagram"></i>
11      <i class="fab fa-youtube"></i>
12    </div>
13  </header>
14
15  <nav>
16    <ul class="nav-list">
17      <li class="nav-list-item">
18        <a>Home</a>
19      </li>
20      <li class="nav-list-item">
21        <a>アクセス</a>
22      </li>
23      <li class="nav-list-item">
24        <a>Blog</a>
25      </li>
26
27    </ul>
28  </nav>
29
30    <span style="text-align:center;display:block">
31      <a href="img/6fe946334955aa7f790373c3a832accb9fe1aab5w300ts_6991118.png"></a>
32      <a href="img/a4a6dfe8bff8a490f3828c535360a3c58aba888cw300ts_6991121png"></a>
33      <a href="100843f92e841a99803a27a03f12c82498a200f7w300ts_6991122.png"></a>
34      <a href="4011487c867fab9ac5c0c52aeb2cece698473927w300ts_6991119.png"></a>
35    </span>
36```HTML
37
38```CSS
39header {
40  font-family: "HG丸ｺﾞｼｯｸM-PRO"
41  }
42  
43.nav{
44  font-family: "HG丸ｺﾞｼｯｸM-PRO"
45  }
46
47header {
48  width: 90%; /* 横幅90% */
49  padding: 15px 0;
50  margin: 0 auto;
51  text-align: center;
52  position: relative;
53}
54
55.social i {
56  display: inline-block;
57  margin-left: 20px;
58}
59
60.social {
61  position: absolute;
62  top: 22px;
63  right: 22px;
64}
65
66header .heading {
67  /* headerタグ内のheadingクラスにのみ反映される */
68  font-size: 32px;
69}
70
71.fa-facebook-square{
72  color:#4169e1;
73}
74
75.fa-twitter-square{
76  color:#1da1f2;
77}
78
79.fa-instagram{
80  color:#e1306c;
81}
82
83.fa-youtube{
84  color:#ff0000;
85}
86
87
88header .heading{
89  font-size: 32px;
90}
91
92.nav-list{
93  text-align: center;
94  padding: 10px 0;
95  margin: 0 auto;
96}
97
98.nav-list-item{
99  list-style: none;
100  display: inline-block;
101  margin: 0 20px;
102}
103
104.content {
105  width: 960px;
106  margin: 0 auto;
107  position: center;
108}
109
110#index {
111  background-image: url(img/gahag-0102404589-2.jpg);
112  background-repeat: no-repeat;
113  background-position: center center;
114  background-attachment: fixed;
115  background-size: cover;
116}

のようにしております。

宜しくお願い致します。

追記

kei344

2021/06/26 04:59

teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

alfha10

2021/06/26 05:08

ご指摘ありがとうございました。また、慣れておらず申し訳ございませんでした。訂正致しました。宜しくお願い致します。

kei344

2021/06/26 05:17

画像が1つしか指定がありませんが、どのようにしたいのかがわかりません。「現在の背景が表示されていない」というのが問題なのだとしたら画像ファイルやCSSファイルのディレクトリ構造を提示してください。

m.ts10806

2021/06/26 05:34

どういう画像を元にどうしたいのかを図示したうえで、現状起きてる問題を記載してください。

alfha10

2021/06/26 06:17

画像を追記致しました。上の画像に下の画像を入れたいのですが。宜しくお願致します。

m.ts10806

2021/06/26 07:47

１つ目の画像を背景画像にして上に載せるとかそういう話でしょうか。

alfha10

2021/06/26 07:51

はい。そうです。お願い致します。

行動規範の内容に同意します

回答3件

ベストアンサー

空の写真はbody要素のbackgroundになっているので、特に何も考えずコンテンツを作っていけば画像アイコンは期待通りの位置に入ります。

ただ、a要素のhrefに画像URLを入れると単なる画像のリンクなので、img要素をつかって画像を表示するようにしましょう。このimg要素をa要素で括るようにすればアイコンを使ったリンクになります。

また、画像を括る親要素をspanからdivへ変更しましょう。divでないと text-alignが有効になりません。

html
1<!-- 画像リンクの部分だけ抜粋 -->
2  <div class="main-menu">
3    <a href="#"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=%E8%BE%B2%E6%A5%AD" alt="農業"></a>
4    <a href="#"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=%E5%AE%B6%E4%BA%8B%E4%BB%A3%E8%A1%8C" alt="農業"></a>
5    <a href="#"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=%E4%BA%8B%E5%8B%99" alt="農業"></a>
6    <a href="#"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=%E5%8B%95%E7%94%BB%E7%B7%A8%E9%9B%86" alt="農業"></a>
7  </div>

css
1/* main-menuクラスを追加して、装飾はこちらへ入れる */
2.main-menu{
3  text-align: center;
4}

テスト用に適当なダミー画像をsrcに入れているので、この画像は本来のものに差し替えてください。

codepeでのデモ

おそらくまだ学習し始めたばかりで各タグの正しい用法等もわかっていない状態だと思います。
易しめの入門書を購入して順序立てて学習するのが良いかと思います。

投稿2021/06/26 09:56

hope_mucci

総合スコア4447

alfha10

2021/06/26 12:10

ありがとうございました。無事に解決致しました。

行動規範の内容に同意します

css
1display: flex;
2justify-content: center;
3align-items: center;

のところは真ん中寄せしているだけなので、消してください。

投稿2021/06/26 22:12

mogmo

総合スコア13

alfha10

2021/06/29 10:50

回答が遅くなって申し訳ありません。了解いたしました。教えて下さり、ありがとうございます。

行動規範の内容に同意します

html

css

.a {
width: 100%;
height: 100vh;
position: absolute;
top: 0px;
left: 0px;
background-image: url(***);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}