トップバナーの部分だけに背景画像を追加したい

Question

トップバナーの部分だけに背景画像を追加したい

wordpressでwebページを作成しています。
トップバナーの部分を画像のように、青線部分をトップイメージ、赤点線部分までを背景画像としてトップバナーと背景を天地揃えでつながるように設定したいです。


■■な機能を実装中に以下のエラーメッセージが発生しました。

エラーメッセージ

該当のソースコード

/*************
メインビジュアル
*************/
#main_img{
width: 910px;
height: 385px;
padding: 0;
background: url(images/main2.jpg) no-repeat top center;
margin:0 0 30px;
text-indent:-9999px;
}

/*************
全体
*************/
#wrapper{
width: 100%;
background: url(images/bg_content.jpg) repeat-x bottom center;
}
#content{
margin: 0 auto;
padding : 50px 0 70px;
width: 910px;
clear:both;
overflow: hidden;
}

```PHP
<?php get_header(); ?>
			<!-- 中央メイン画像 -->
			<div id="main_img"><!--メイン画像が入ります--></div>
			<!-- / 中央メイン画像 -->
<?php get_sidebar(); ?>


		<!-- 中央カラム -->
		<div id="main">

### 試したこと

背景画像をCSSで複数設定し該当の背景位置を調整すれば良いかと思い下記のようなコードを参照に試しましたが、何も変化がありませんでした。

background-image:
        url(bg_content.jpg),
        url(bg_content1.jpg);
    background-position:
        bottom center,
        top center;
    background-repeat:
        repeat-x,
        no-repeat;

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

Comments

[m.ts10806]

提示のコードにおける状態は上の画像ということでしょうか。
それとも別の状態でしょうか。
起きている現象を具体的に記載してください。
https://teratail.com/help/question-tips#questionTips3-4-1

[karasu1227]

提示コードの状態は上の画像です。
上の画像を下の画像のようにしたいのですが、該当箇所と思われるCSSを変更しても上の画像のままか現在bottomに指定している画像が全体に連続して表示されるだけになります。
初心者で的外れな質問かもしれませんがご回答お願いします。

[m.ts10806]

あ、そういえば、該当部分のHTMLもご提示いただけますか？CSSだけだと再現確認できませんので

[m.ts10806]

質問は編集できますので適宜追記・修正してください

[karasu1227]

wordpressなのでindex.phpの該当部分で良いでしょうか？
該当部分のコードは
<?php get_header(); ?>
<!-- 中央メイン画像 -->
<div id="main_img"><!--メイン画像が入ります--></div>
<!-- / 中央メイン画像 -->
<?php get_sidebar(); ?>
<!-- 中央カラム -->
<div id="main">
となっています。

ちなみにサイトのURLは下記です。
https://esthetic-ichika.com/

[m.ts10806]

いえ、タグは「CSS」ですし、その「トップバナー部分」のHTMLだけでも十分かと思います。
要は「他者がコピペで再現確認できる情報」なので。
WordPressだとテーマの問題や設定の問題で再現確認できる人がかなり限られます。
WordPressによる回答がお望みでしたら「WordPress」タグも追加されたほうが良いです。
※いずれも質問編集してご対応ください。こちらのコメント欄はデフォルト非表示です

[karasu1227]

ご丁寧にありがとうございます。
該当部分再度確認し、タグも追加したいと思います。

[Lhankor_Mhy]

https://esthetic-ichika.com/
.main_img のサイズがページいっぱいではないので、まずそこからでは？

[karasu1227]

なるほど試してみます。
ありがとうございます。

[Lhankor_Mhy]

あ、違うのかな？
#content に背景をつける、ということですか？

[karasu1227]

.main_imgの
background: url(images/main2.jpg) の画像にurl(images/bg_content1.jpg)という画像を重ねたいと思っています。

[Lhankor_Mhy]

HTML構造変えないと難しそうな感じがしますね。

[karasu1227]

やはりそうですか。
拙い質問にご回答いただきありがとうございました。

Answer 1

自己解決しましたので投稿します。
wrapper{
width: 100%;
background: url(images/bg_content.jpg) repeat-x bottom center;
}
上記該当箇所（太字）を下記に書き換えたところ、正常に表示されました。
background-image: url(images/bg_content.jpg), url(images/bg_content1.jpg);
background-repeat:repeat-x,repeat-x;
background-position:bottom center,top 260px center;
background-size:auto,100% 365px;

コメント頂いた方、ありがとうございました。