HP ページごとにタイトル画像を変えたいです
以前質問したのですが、解決せず再度質問です。
HPを作成中です。
タイトル部（ヘッダ）の画像をページごとに変えようとしています。
bodyタグにclassを使用して変えようと思ったのですが、エディターでは上手く表示されるものの
いざUPすると変更したい部分だけ表示されず背景色（黒）になってしまいます。
作成した外部cssとHTMLは
css
@charset "shift_jis";
body {
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
font-size: 75%;
line-height: 2;
color: #ffffff;
background-color: #000000;
margin: 0px;
padding: 0px;
text-align: center;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form{
margin: 0px;
padding: 0px;
}
ul{
list-style-type: none;
}
img {
border: none;
}
input,textarea,select {
font-size: 1em;
}
form {
margin: 0px;
}
table {
border-collapse:collapse;
font-size: 100%;
border-spacing: 0;
}
---------------------------------------------------------------------------*/
a {
color: #ffffff;
}
a:hover {
color: #FF0000;
text-decoration: none;
}
---------------------------------------------------------------------------*/
#container {
width: 910px;
text-align: left;
margin-right: auto;
margin-left: auto;
}
---------------------------------------------------------------------------*/
.★★★ #header {
background-image: url(images/mainimg.jpg);
background-repeat: no-repeat;
width: 100%;
height: 360px;
}
.●●● #header {
background-image: url(images/mainimg-2.jpg);
background-repeat: no-repeat;
width: 100%;
height: 655px;
}
.■■■ #header {
background-image: url(images/allstars-1.jpg);
background-repeat: no-repeat;
width: 100%;
height: 560px;
}
.▲▲▲ #header {
background-image: url(images/allstars-2.jpg);
background-repeat: no-repeat;
width: 100%;
height: 605px;
}
.■■■ #header {
background-image: url(images/allstars-3.jpg);
background-repeat: no-repeat;
width: 100%;
height: 560px;
}
#header h1 {
font-size: 10px;
color: #FFFFFF;
line-height: 40px;
font-weight: normal;
text-align: right;
}
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>〇〇〇</title>
<meta name="description" content="×××" />
<meta name="keywords" content="....." />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body class="●●●">
<div id="container">
<div id="header">
<h1>〇〇〇</h1>
</div>
<!--/header-->
こんな感じです。
mainimg部（大きさが異なります）の変更のみです。
不具合箇所を教えてください。
よろしくお願いいたします。
お礼
回答をありがとうございます。 試行錯誤を繰り返してみます。