ページごとに背景画像を変更したいのですが

締切済

質問者：okinawasea
質問日時：2013/04/01 15:06
回答数：1件

HPを作成中です。

レイアウトは各ページ全く同じなのですが、ヘッダー部の画像のみカテゴリによって変えようと思っています。
cssで各画像を指定しbodyタグにidやclassで変更を試みたところエディターでは異なる画像が表示されますが、いざweb上で確認すると画像が表示されない状況でした。
そこで、各ページにそれぞれスタイルシートを用いたのですがやはり上手く反映されません。

現在HTML側は

<link href="style_i.css" rel="stylesheet" type="text/css" />

cssファイルには「style_i.css」と名前を付け、該当部分は

#header {
background-image: url(images/mainimg-2.jpg);
background-repeat: no-repeat;
width: 100%;
height: 655px;
}

となっています。
mainimgの変更のみです。

やはりエディターでは表示されますが、web上では画像が表示されません。
どのようにしたら画像変更できるでしょうか？

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2013/04/01 19:52

idやclass名の使い方が違う。

<body class="product1">
とか
<body class="product2">
にしておく。

body.product1 div.header{background:****;}
body.product2 div.header{background:****;}
body.product3 div.header{background:****;}
body * div.header{background-image:none!important;}

　とかでよいですよ。最後の指定は、孫に同じクラス名のdivがあったらまずいので最重要宣言で消している。

HTML5だと
<body>
　<header>
　　<h1>見出し</h1>
でしょうから
body.product1>header{background:****;}
body.product2>header{background:****;}
body.product3>header{background:****;}
子供セレクタを使っている。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

当初

.aaa #header {
background-image: url(../images/mainimg.jpg);
background-repeat: no-repeat;
width: 100%;
height: 360px;
}

.bbb #header {
background-image: url(../images/mainimg-2.jpg);
background-repeat: no-repeat;
width: 100%;
height: 655px;
}

.ccc #header {
background-image: url(../images/allstars-1.jpg);
background-repeat: no-repeat;
width: 100%;
height: 560px;
}

.ddd #header {
background-image: url(../images/allstars-2.jpg);
background-repeat: no-repeat;
width: 100%;
height: 605px;
}

.eee #header {
background-image: url(../images/allstars-3.jpg);
background-repeat: no-repeat;
width: 100%;
height: 560px;
}

とCSSを作成し

ページごとに

<body class="aaa">や<body class="bbb">

のように読み込んでいたのですが、いざアップすると表示されませんでした。（エディターではOK）

回答者様のご指摘通りやってみたいと思いますが、上記では表示されない意味が分かりません。
お時間ございましたら不具合箇所を教えてください。
よろしくお願いいたします。