isara模写　sec02クラスのbackground-imageを本家isaraのサイトのように配置したいです。

現在

html
1コード<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
7  <title></title>
8  <link rel="stylesheet" href="special.css">
9</head>
10<body>
11  <header>
12  <div class="header">
13    <div class="inner">
14      <h1>
15        <img src="../isara/isaralogo.png" alt="">
16        バンコクのノマドエンジニア育成講座
17      </h1>
18      <p class="btn">
19        <a href="#">
20          お問い合わせ / 資料請求はこちら
21          
22        </a>
23      </p>
24    </div>  
25  </div>
26</header>
27    <div class="key-visual">
28      <img src="" alt="">
29      <div class="key-visual_ttl">
30        <h2>プログラミングで<br>人生の安定を手に入れよう</h2>
31        <p><img src="../isara/isaralogolarge.png" alt=""></p>
32        <p>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</p>
33      </div>
34    </div>
35<main>
36  <div class="main">
37      <section class="sec01">
38        <h3>
39          まずは20日間で、<br>
40          月十万稼げるスキルを手に入れよう
41        </h3>
42        <p class="free">
43          ※受講料金は実質０円です。詳しくは資料請求をどうぞ。
44    
45        </p>
46        <p>
47          <a href="#">
48            お問い合わせ＆資料請求はこちら
49    
50          </a>
51        </p>
52        <ul>
53          <li>
54            第６期生：2019年11月25日 ~ 2019年12月14日＊締め切りました
55    
56          </li>
57          <li>
58            第７期生：2020年2月17日 ~ 2020年3月7日＊締め切りました
59    
60          </li>
61          <li>
62            第8期生：2021年内に開催予定＊資料請求受付中です
63    
64          </li>
65        </ul>
66
67      </section>
68      <div class="sns">
69        <div class="twitter button"></div>
70        <div class="good button"></div>
71        <div class="share button"></div>
72      </div>
73      <section class="sec02">
74        <div class="inner">
75
76          <h3 class="ttl_flame">エンジニアとして本当の自由を手に入れるためには？</h3>
77          <p>エンジニア需要の高まりに伴い、プログラミングスクールが増えています。<br>
78            しかしそこでの学習の先は、 提携して決められた就職先に就職すること。</p>
79            <p>これで本当にいいのですか？
80              <br>日本人エンジニアはアメリカと較べて給料が格段に低い。
81              <br>その理由がここにあり、 エンジニアは自分の給料をコントロールすべきなのです。</p>
82              <p>スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。
83                <br>そこで必要なのが <span>「稼ぐ力」</span>です。</p>
84              </h3>
85        </div>
86      </section>
87      <div class="circle">
88        <p>ABOUT</p>
89      </div>
90      <div class="sec03">
91        <h3>
92          ノマドエンジニア育成講座
93          iSara[イサラ]とは
94          
95        </h3>
96      </div>
97    </section>
98  </div>
99  
100</main>
101</body>
102</html>

css
1コード@charset "UTF-8";
2html, body, div, span, object, iframe,
3h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4abbr, address, cite, code,
5del, dfn, em, img, ins, kbd, q, samp,
6small, strong, sub, sup, var,
7b, i,
8dl, dt, dd, ol, ul, li,
9fieldset, form, label, legend,
10table, caption, tbody, tfoot, thead, tr, th, td,
11article, aside, canvas, details, figcaption, figure, 
12footer, header, hgroup, menu, nav, section, summary,
13time, mark, audio, video {
14    margin:0;
15    padding:0;
16    border:0;
17    outline:0;
18    font-size:100%;
19    vertical-align:baseline;
20    background:transparent;
21}
22
23body {
24    line-height:1;
25    font-family:"�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", ���C���I, Meiryo, Osaka, "�l�r �o�S�V�b�N", "MS PGothic", sans-serif;
26}
27
28article,aside,details,figcaption,figure,
29footer,header,hgroup,menu,nav,section { 
30    display:block;
31}
32
33nav ul {
34    list-style:none;
35}
36
37blockquote, q {
38    quotes:none;
39}
40
41blockquote:before, blockquote:after,
42q:before, q:after {
43    content:'';
44    content:none;
45}
46
47a {
48    margin:0;
49    padding:0;
50    font-size:100%;
51    vertical-align:baseline;
52    background:transparent;
53}
54
55/* change colours to suit your needs */
56ins {
57    background-color:#ff9;
58    color:#000;
59    text-decoration:none;
60}
61
62/* change colours to suit your needs */
63mark {
64    background-color:#ff9;
65    color:#000; 
66    font-style:italic;
67    font-weight:bold;
68}
69
70del {
71    text-decoration: line-through;
72}
73
74abbr[title], dfn[title] {
75    border-bottom:1px dotted;
76    cursor:help;
77}
78
79table {
80    border-collapse:collapse;
81    border-spacing:0;
82}
83
84/* change border colour to suit your needs */
85hr {
86    display:block;
87    height:1px;
88    border:0;   
89    border-top:1px solid #cccccc;
90    margin:1em 0;
91    padding:0;
92}
93
94input, select {
95    vertical-align:middle;
96}
97
98/* ここから */
99.header {
100  height:45px;
101  background-color:#fff;
102  text-align:right;
103  padding: 15px 0;
104  position:fixed;
105  width:100%;
106  position:relative;
107}
108
109.inner {
110  
111  width:1170px;
112  margin:0 auto;
113}
114.header h1 {
115  position:absolute;
116  top:2px;
117  left:0;
118}
119.key-visual {
120  background-color:skyblue;
121  background-image:url(../isara/download.jpg);
122  height:360px;
123  background-size:cover;
124  padding:70px 0;
125  
126  
127  
128}
129.key-visual_ttl {
130  text-align:center;
131  padding:10px 30px;
132  
133}
134.key-visual_ttl> h2 {
135  margin-bottom:30px;
136}
137.key-visual_ttl > p > img{
138  width:225px;
139  margin-bottom:47px;
140}
141.sec01 {
142  background-color:rgb(235,185,77);
143  height:470px;
144  text-align:center;
145  padding:35px 0;
146  
147}
148
149.sec01 > h3, p > a, ul > li {
150  /* color:#fff; */
151}
152.header h1 > img {
153  width:120px;
154}
155
156
157.header p > a {
158  text-decoration:none;
159  height:45px;
160  line-height:45px;
161  padding:0 40px;
162  
163  
164}
165.btn {
166  display:inline-block;
167  background:rgb(218,107,100);
168  border-radius:30px;
169}
170.btn a {
171  color:#fff;
172  letter-spacing:1px;
173  
174}
175.main {
176}
177.sec01 ,.main a{
178  color:#fff;
179}
180.main a { 
181  text-decoration:none;
182  font-size:28px;
183  padding:40px 295px;
184  margin:47px 0;
185  background:rgb(218,107,100);
186  display:inline-block;
187  border-radius:48px;
188
189
190}
191.free {
192  background-color:#fff;
193  border-radius:2px;
194  color:red;
195  display:inline-block;
196  margin-top:22px;
197
198}
199.main ul > li {
200  font-size:21px;
201  padding-bottom:45px;
202}
203.sec01 h3 {
204  line-height:32px;
205  font-size:20px;
206}
207.sec02 {
208  background-image: url(../isara/introbottom.jpg);
209  height:587px;
210  text-align:center;
211  padding:40px 0 140px;
212  background-position:center;
213  background-size:no-repeat;
214  
215  
216  
217}
218.sec02 p {
219  margin-bottom:25px;
220
221}
222.sec02 span {
223  border-bottom:10px solid rgb(235,185,77);
224}
225.ttl_flame {
226  position:relative;
227  width:860px;
228  margin:0 auto 40px;
229  font-size:28px;
230  padding:40px 0;
231  /* background:red; */
232}
233.sec02 p {
234  font-size:20px;
235  
236  line-height:32px;
237}
238
239.ttl_flame::before, .ttl_flame::after {
240  position:absolute;
241  content:'';
242
243}
244.ttl_flame::before {
245  width:50px;
246  height:50px;
247  border-left:3px solid rgb(235,185,77);
248  border-top:3px solid rgb(235,185,77);
249  top:0;
250  left:0;
251
252}
253.ttl_flame::after {
254  width:50px;
255  height:50px;
256  border-right:3px solid rgb(235,185,77);
257  border-bottom:3px solid rgb(235,185,77);
258  bottom:0;
259  right:0;
260
261
262}

marasonPD

2021/03/20 06:39

コードしか掲載されていませんが、具体的に何が問題でどうされたいかなど追記いただけますか。

beginner

2021/03/20 07:20

回答ありがとうございます！分かりづらくて申し訳ありません

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

回答1件

ベストアンサー

この記述は初めて見ます。
no-repeatではなくてcoverにしてみませんか？
key-visualと同じように。

CSS
1//background-size:no-repeat;
2background-size:cover;

以下蛇足です。
no-repeatはbackground-repeatで使うと良いかも。

投稿2021/03/20 07:01

編集2021/03/20 07:02

退会済みユーザー

総合スコア0

beginner

2021/03/20 07:19

ありがとうございます。問題解決しました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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

isara模写　sec02クラスのbackground-imageを本家isaraのサイトのように配置したいです。

関連した質問