※ ChatGPTを利用し、要約された質問です（原文：背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を
）
CSSで背景画像の中央配置と位置指定に関する問題
このQ&Aのポイント
CSSで背景画像の中央配置と位置指定に関して問題が発生しています。
画面サイズを変更すると位置がずれてしまう問題があります。
検索でヒットした位置指定のソースと自身のソースを比較して解決策を見つけたいと思っています。
背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を
背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を
位置指定したいのですが、うまく反映されませんでした。
「 background-position: center center; 」「 background-position: center center; 」
がCSS側での背景画像位置指定と多くヒットしたのですが、反映はされませんでした。
「 margin-left: 80px; 」を指定したところ、画面中央に位置が反映されたのですが
画面サイズを１０２４×７６８から１２８０×１０２４に変更すると
中央から左寄りにずれてしまいます。
下記に実際のソースを記載致しますので、どなたか解る方がいらっしゃいましたら
アドバイスの程宜しくお願いいたします。
－ 画面サイズを変更すると位置がずれてしまうソース －
@charset "utf-8";
#img {
width: 700px;
height: 125px;
background: url(img.jpg);
margin-left: 80px;
background-repeat: no-repeat;
}
#img #img2 {
float: right;
margin-right: 0px;
margin-left: 30px;
margin-top: 59px;
margin-bottom: 0px;
}
----------------------------------
－ HTML －
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>img</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body">
<div id="img">
<div id="img2"><img src="img_1.gif" width="50" height="30" border="0" /> <img src="img_2.gif" width="50" height="30" border="0" /></div>
</div>
</body>
</html>
-------------------------------------------
－ 検索でヒットした位置指定のソース －
@charset "utf-8";
#img {
width: 700px;
height: 125px;
background: url(img_2.jpg);
background-position: center center;
background-repeat: no-repeat;
}
#img #img2 {
float: right;
margin-right: 0px;
margin-left: 30px;
margin-top: 59px;
margin-bottom: 0px;
}
-------------------------------------------
－ HTMLは上記と同じ －
お礼
ご回答頂きありがとうございます。 背景画像のセンタリングは記載して頂きました 下記のソースで解決いたしました。 #img { width: 700px; height: 125px; background: url(img.jpg) center center no-repeat; margin: auto; } ------------------------------------------ 厳密に配置を決めたいので「position:absolute;」を 指定したところ、画面サイズをどんなに変更しても 下記の記述で無事解決いたしました。 #img #img2 { position:absolute; top:80px; padding-left: 590px; } ------------------------------------------ とても勉強になりました。 アドバイスを頂き本当にありがとうございました。