セクションの区切りを波波にしたいです。

実現したいこと

-INFOセクションの区切りを画像のように波波にしたい

前提

コーディングの練習を始めたものです。
架空サイトを作っており、INFOの上部分を波波にしたいのですがうまくいきません。
波波の部分を画像として設置してみたりしたのですが隙間ができてしまいます。

初学者で理解が浅い部分がまだ多いのですが、どなたかご教授いただけると幸いです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1<div id="info">
2      <div class="info-inner">
3      <div class="section-inner">
4        <h2>INFO</h2>
5        
6        <div class="col-2">
7          <div class="item">
8            <div class="gmap">
9              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3231.655650778294!2d139.62127987561323!3d35.906448472515436!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018c143cc2c5285%3A0x280f665a32e5d413!2z5aSn5a6u6aeF!5e0!3m2!1sja!2sjp!4v1689918861964!5m2!1sja!2sjp" width="100%" height="auto" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
10            </div>
11          </div>
12
13          <div class="item">
14            <p class="info">
15              〒330-0853 <br>
16              埼玉県さいたま市大宮区錦町 <br>
17              ○○ビル 10F</p>
18            <p class="time">
19              営業時間 : 17:00~2:00 <br>
20              定休日 : 月曜日 <br>
21            </p>
22            <a href="https://goo.gl/maps/jmQcHuryreum2x1g7" class="button">Googleマップで見る</a>
23          </div>
24        </div>
25        
26      </div>
27      </div>
28    </div>

該当のソースコード

CSS
1.info-inner{
2	background-color: #0c3d5a;
3	padding: 40px 0;
4	margin-top: 70px;
5	position: relative;
6}
7
8.info-inner::before {
9	content: '';
10	background-image: url(../images/info-top.png);
11	background-repeat: repeat-x;
12	background-position: center top;
13	background-size: auto 70px;
14	width: 100%;
15	height: 70px;
16	position: absolute;
17	left: 0;
18	top: -69px;
19}

試したこと

擬似要素（：before）で波波の画像を置いてみたりしたのですがうまくいきません。
（似たようなデザインがあるサイトのソースを参考にしてやってみました。）

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

hatena19

2023/07/22 06:18

現状のHTMLとCSSを質問に追記してください。

Lhankor_Mhy

2023/07/22 06:32

コードを提示してください。 HTMLでの区切りというのは、hrタグのことでいいですか？

natsu888

2023/07/22 11:32

失礼いたしました。コードを追記いたしました。

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

回答1件

ベストアンサー

background-sizeを下記のように修正したらどうでしょう。

css
1.info-inner::before {
2	content: '';
3	background-image: url(../images/info-top.png);
4	background-repeat: repeat-x;
5	background-position: center top;
6	background-size: 100% 70px; /* auto  を 100% に修正 */
7	width: 100%;
8	height: 70px;
9	position: absolute;
10	left: 0;
11	top: -69px;
12}