javascriptを使用したエリアの中に画像を挿入したいです

javascriptを使用したエリアの中のボタンの上に画像を挿入したいのですが、どのような方法がありますでしょうか。
ご回答、宜しくお願い致します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>＃</title>
6    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP%7COswald&display=swap" rel="stylesheet">>
7
8    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.css">  
9    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css">
10    <!--自作のCSS-->
11    <link rel="stylesheet" type="text/css" href="css/reset.css">
12    <link rel="stylesheet" type="text/css" href="css/parts.css">
13    <link rel="stylesheet" type="text/css" href="css/layout.css">
14  </head>
15
16  <body>
17    <header id="header">
18        <h1><a href="#"><span class="bgextend bgLRextendTrigger"><br class="bgappearTrigger">＃</span></span></a></h1>
19            
20        <div class="openbtn smoothTrigger"><div class="openbtn-area"><span></span><span></span><span></span></div></div>
21<nav id="g-nav">
22    <div class="circle-bg"></div>
23<div id="g-nav-list">
24<ul>
25<li><a href="＃
26">＃</a></li>	
27<li><a href="＃>＃</a></li>	
28<li><a href="＃">＃</a></li>	
29<li><a href="＃">＃</a></li>
30<li><a href="＃">＃</a></li>	
31</ul>
32</div>
33</nav>
34      <section id="service">
35        <header class="fadeLeftTrigger">
36        <h2>＃</h2>
37        </header>
38        <div class="service-area fadeUpTrigger">
39        <ul class="randomScroll">
40            <li><a href="#" class="btnlinestretches">＃</a></li>
41            <li><a href="#" class="btnlinestretches">＃</a></li>
42        </ul>
43            
44        </div>
45    </section>
46    <!--/footer-->
47    <!--/container-->
48    <!--=============JS ===============--> 
49    <!--jQuery-->
50    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>    
51    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
52    <script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.js"></script>
53    <script src="js/script.js"></script>
54    </body>
55    </html>

CSS
1@charset "utf-8";
2body{
3    background: #fff;
4    font-family: "Kosugi Maru", sans-serif;
5	color: #333;
6	font-size:1rem;
7	line-height:1.85;
8	-webkit-font-smoothing: antialiased;
9	-moz-osx-font-smoothing: grayscale;
10	-webkit-text-size-adjust: 100%; 
11	word-wrap: break-word;
12}
13
14h1{
15    font-size: 2rem;
16    text-align: center;
17}
18
19ul{
20	margin:0;
21	padding: 0;
22	list-style: none;
23}
24
25a{
26	color: #333;
27	text-decoration: none;
28    outline: none;
29}
30
31#service{
32    position: relative;
33    text-align: center;
34    
35}
36
37#service header{
38    background:#dc143c;
39    color: #fff;
40    width:100%;
41    padding: 50px 0 100px 0;
42    z-index: 1;
43}
44
45#service header h2{
46    font-size: 1.3rem;
47    margin: 0 0 20px 0;
48    letter-spacing: 0.1em;
49}
50
51#service header p{
52    margin: 0 0 30px 0;   
53}
54
55#service header p br{
56     display: none;   
57}
58
59#service .service-area{
60    background:#dc143c;
61    padding: 70px;
62    width:100%;
63    position: relative;
64    top:-50px;
65    z-index: 2;
66}
67
68#service .service-area ul{
69    display: flex;
70    flex-wrap: wrap;
71    justify-content:space-around;
72    transform:  translate3d(0, 0, 0);
73}
74
75#service .service-area ul li{
76    opacity: 0;
77    width:40%;
78    padding: 0 0 50px 0;
79}
80
81#service .service-area ul li a{
82    display: block;
83}
84
85@media screen and (max-width:960px) {
86    #service header{
87        width:100%;
88    }
89    #service .service-area{
90        width:80%;
91        left:10%;
92        padding: 80px 20px 30px 20px;
93    }
94#service .service-area ul li{
95    width:40%;
96    }   
97
98#service header p br{
99     display:block;   
100}
101}
102
103@media screen and (max-width:768px) {
104    #service{
105        padding: 200px 0 0 0;
106    }
107}
108
109@media screen and (max-width:550px) {
110    #service .service-area{
111    width:90%;
112    left:5%;
113    }
114}
115
116@media screen and (max-width:400px) {
117    #service .service-area{
118    width:100%;
119    left:0;
120    font-size: 0.9rem;
121}
122    
123}
124

m.ts10806

2021/08/23 02:26

現状の問題点は何でしょうか。 htmlに明らかなミスがあるというくらいはコードからわかるのですけど。例えば <li><a href="＃>＃</a></li> <li><a href="＃">＃</a></li>

alfha10

2021/08/23 02:30

説明不足で申し訳ありません。 <section id="service"> <header class="fadeLeftTrigger"> <h2>＃</h2> </header> <div class="service-area fadeUpTrigger"> <ul class="randomScroll"> <li><a href="#" class="btnlinestretches">＃</a></li> <li><a href="#" class="btnlinestretches">＃</a></li> </ul> の部分に画像を挿入したいのですが、<img class>など新しくclassを作っても画像が表示されす、どのような方法があるのか教えて頂きたいです。宜しくお願い致します。

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

回答3件

自己解決

正しいかはわかりませんが解決しました。

HTML
1 <section id="service">
2        <header class="fadeLeftTrigger">
3        <h2>#</h2>
4        </header>
5        <div class="service-area fadeUpTrigger">
6        <ul class="randomScroll">
7            <il><img class src="img/satchel-3931937_1920.jpg"></il> 
8            <il><img class src="img/moving-312082_1280.png"></il>
9            <li><a href="#" class="btnlinestretches">#</a></li>
10            <li><a href="#" class="btnlinestretches">#</a></li>
11        </ul>

CSS
1#service .service-area img {
2  width: 500px;
3  height: 450px;
4  padding: 30px 0;
5}

自分の知識不足でレベルの低い質問で申し訳ございませんでした。
御覧頂いた方、ありがとうございました。

投稿2021/08/23 05:40

alfha10

総合スコア1

HTML
1 <section id="service">
2        <header class="fadeLeftTrigger">
3        <h2>#</h2>
4        </header>
5        <div class="service-area fadeUpTrigger">
6        <ul class="randomScroll">
7            <img class src="img/satchel-3931937_1920.jpg">
8            <li><a href="#" class="btnlinestretches">#</a></li>
9            <li><a href="#" class="btnlinestretches">#</a></li>
10        </ul>

上記のようにしてみましたが、画像がボタンの横に表示されてしまいます。

投稿2021/08/23 05:13

alfha10

総合スコア1

HTML
1 <section id="service">
2        <header class="fadeLeftTrigger">
3        <h2>＃</h2>
4        </header>
5        <div class="service-area fadeUpTrigger">
6        <ul class="randomScroll">
7            <li><a href="#" class="btnlinestretches">＃</a></li>
8            <li><a href="#" class="btnlinestretches">＃</a></li>
9        </ul>