複数あるPタグや背景画像にしない画像を綺麗に表示させながらimgタグで指定した画像を背景画像にしたい。

Question

前提・実現したいこと

さきほどimgタグで表示した画像を背景画像にしてその上に文字を表示させるやり方をここで教わりました。
それを応用しようとしてPタグが多かったり背景画像にしない画像を表示させたりすたいのですが下記のように実行すると
レイアウトがだだ崩れになってしまいました。
背景画像は背景色よりも一回り小さめに表示させ縦横中央にしたいです。
まずはabsoluteなどをしっかり理解すべきなんですが、取り急ぎご教授頂けると助かります。

該当のソースコード

html

	<article class="eigaBox1">
	<p class="menuImg"><img src="1018X860.png"></p>
	<div class="eigaTableMain">
		
				<div class="ABox">
					<img src="AAA.png">
					<div class="box">
		<div class="A-info1">
		<p class="ATitle">テスト</p>
		<p class="ALine"><img src="800X5.png"></p>
		<p class="goal"><img src="400X400.png"></p>
		<p class="copyText1">テストテストテストテストテストテストテスト</p>
		<p class="copyText2">テストテストテストテストテストテストテスト。</p>
					
		</div>
		</div>
		</div>		
		</div>
</article>

CSS

eigaBox1 .ABox .box p {
		position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	}
	
.eigaBox1 .eigaTableMain {
   position: relative;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
  		display: flex;
		justify-content: center;
  		align-items: center;
                background:red;
	}
	
.eigaBox1 .ATitle {
		font-size:31px;
	}

.eigaBox1 .ALine {
		text-align:center;
	}
	
.eigaBox1 .goal {
		text-align:center;
	}
	
	
.eigaBox1 .copyText1 {
		text-align:center;
		font-size:20px;
		font-weight:bold;
		margin-bottom:20px;
	}
	
.eigaBox1 .copyText2 {
		text-align:center;
		font-size:18px;
	}

Comments

[Lhankor_Mhy]

「背景画像」とは http://officedug.s5.valueserver.jp/yama/wp-content/uploads/2021/12/mujou-frame.png のことでいいですか？
また、「背景色」は .eigaBox1 .eigaTableMain {background:red;} のことでいいですか？

[退会済みユーザー]

そうです。ちょっと画像出すのやめたので質問のほうのコードは変更しました。

Answer 1

背景画像は背景色よりも一回り小さめに表示させ縦横中央にしたい

サイズをパーセンテージ指定するのがいいかと思います。

.eigaBox1 .ABox {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.eigaBox1 .ABox img {
  width: 98%;
  height: 98%;
}

Comments

[退会済みユーザー]

うまくいきました。ありがとうございます。