- 締切済み
ページごとに背景画像を変更したいのですが
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上では画像が表示されません。 どのようにしたら画像変更できるでしょうか？ よろしくお願いいたします。
- okinawasea
- お礼率88% (30/34)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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:****;} 子供セレクタを使っている。
関連するQ&A
- 画像が表示されません
cssを使って、ホームページを作成しようとしています。 ファイルの構成は \MyHP のフォルダーの下に\image と \style と index.html としており、\image の中に 画像の hana.gif を入れ、\style の中に style.css の名前でｃｓｓ ファイルを書いています。 hana.gif を画面の左端に並べようとして、ｃｓｓには body {background-image:url(image/hana.gif); background-repeat:repeat-y; background-attachment:fixed} と書いています。 勿論 index.html の <header> には <link rel="stylesheet" href="style/style.css" type="text/css"> は書いています。 しかし、何も表示されません。 background-color:#ffff00; と書き換えると、画面は黄色一色に変わります。 他のことでも試していますが、どうも background-image:url(....) となるとうまくゆかないようです。 background:url(......)としてもダメです。 何が悪いのでしょうか。現在はIE7を使用していますが、IE6でもダメです。 画像ソフトで hana.gif を確認しましたが、問題なく画像が表示されます。
- ベストアンサー
- ホームページ作成ソフト
- 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部（大きさが異なります）の変更のみです。 不具合箇所を教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- ページがスクロールするのについてくる背景画像
わからなくて困っています。 どなたか分かる方教えてください。 トップページのトピックス部分をインラインフレームで表示させる作りにしました。 インラインフレームの表示部分は310*200です。 表示させる部分なので、トピックスの背景も310*200で作ってcssで固定させました。 表面的にはＯＫなのですが、ページをスクロールすると背景画像が見えなくなってしまいます。 background-repeat: no-repeat; にしてあるのですが、repeatにできない画像なので、困っています。 ページをスクロールするとついてくる背景画像にしたいのですが、どうすればできますか？ cssかjavaでできるでしょうか？ 教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 2つ画像を背景にするスタイルシートってある？
1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか？下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか？ <STYLE TYPE="text/css"> <!-- BODY { background-image:素材のURL; background-position:0% 100%; background-repeat:no-repeat; background-attachment:fixed; } --> </STYLE>
- 締切済み
- CSS
- WEBページの背景に画像を連続配置する方法
WEBページの背景に画像を配置したいと考えています。 bodyの途中から画像を連続で配置したいのですが、 以下のようにCSSで指定しても左上から連続で画像が配置されてしまいます。 ※上から175pxのところから連続で画像を出したいです。 background: transparent url(../images/bg.gif) repeat 0px 175px; background-positionを指定する場合、 background-repeatはno-repeatじゃないとダメなのでしょうか？ 現状、bg.gif自体を画像を連続して配置したような 大きい画像にしてno-repeatで設置しています。 背景の途中から同じ画像を連続配置する方法を 教えていただければ幸いです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- 背景画像
つい先日もこちらで教えていただいたのですが、また分からないのでよろしくお願いします。ビルダー11を使っています。 <style type="text/css"> <!-- body { margin:0px; padding:0px; text-align:center; } #main { margin-left:auto; margin-right:auto; text-align:left; width:650px; } --> </style> </head> <BODY background="080aosirobudou_300.jpg" style="background-repeat:no-repeat"> htmlで全体を真ん中にして、画像はリピートしないようにしていますが 画像の下半分が切れてしまいます。画像を小さくするしかないでしょうか？（加工OKなものを使っています）それと出来れば画像を右端によせたいのですが、上記htmlに <STYLE TYPE="text/css"> <!-- BODY{background-image:url(画像url); background-position:right} --> </STYLE> とすると、画像やスタイルがつぶれます。どうすればよいのでしょうか？ただいま勉強中のため、できましたら素人にも分かりやすく答えていただければありがたいです。よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- firefoxでcssを使った時背景画像が表示されない
CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか？ それともそのような仕様なのでしょうか？ よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);
- 締切済み
- HTML
- ディスプレイサイズにあわせた背景画像
html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthを調整するとかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat;//ライン画像の一部 position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x;//ライン画像 position:absolute; left:850px; top:0; } ************************************************
- 締切済み
- Visual Basic
- 背景画像だけをはみ出して表示させたい。
CSSについて質問です。 よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい！！</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。
- ベストアンサー
- HTML
- 任意のテーブルのみに背景画像を設置して、時間ごとに変更するには？
ホームページを作っていてどうしても うまくいかないことがあるので相談させてください。 １ページの中に複数のテーブルがあるのですが、 そのうちの一つだけに背景画像を設置して、 尚かつ時間ごとに画像を変更したいのですが、 うまくできません。 BODYの背景を変える場合は、JAVAスクリプトで できたのですが、任意のテーブルのみに同じような ことをすることはできないのでしょうか。 いくつか試したのですが、例えばCSSを用いて、 <style type="text/css"> <!-- .timg{ background-attachment: scroll; background-image: url(img/001.gif); background-repeat: no-repeat; background-position: center; } --> </style> としておき、任意のテーブルタグにて <table class="timg"> とすることで、任意のテーブルのみに 背景をつけるとこまではできたのですが ここからJAVAスクリプトで背景を時間ごとに 変えるやり方がわかりませんでした。 どうかアドバイスよろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございます。 当初 .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） 回答者様のご指摘通りやってみたいと思いますが、上記では表示されない意味が分かりません。 お時間ございましたら不具合箇所を教えてください。 よろしくお願いいたします。