はじめまして、スタイルシートで背景の指定をしたいのですが。

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： エリ ： 2007/08/03（金） 19:17  ID:CdsuYQ// sub-.G
背景の設定なのですが、左下に画像を一個右上に画像を一個置いて、それ以外を黒に指定したいのですが…
(たとえば左下に花　右上に月　それ以外を黒に指定)
最初から二つとも表示させるのは難しそうなので真ん中に連続で表示させようと思って↓を作りました


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>お試し</title>


<style type="text/css">
<!--
body { background:#000000 "image/gi.jpg" repeat-x fixed center; color:#FFFFFF; }
</style>
</head>


<body topmargin="80">
<p>
<strong><font size="200"><font color="#FFFFFF"><div align="center">これは実験です</div></font><strong>
<p>
</body>

indexで開くと背景は真っ黒のままで画像が一つも表示されません。文字はちゃんと白ですが…画像が表示されません…背景の黒指定で塗りつぶされているのかな？と思い黒を指定しないで実行してもなぜか画像が表示されません。
いろいろなスタイルシートを紹介しているHPを見て試してみたのですが・・・一向に表示されないのでここへ書き込みました・・・よろしかったら教えてください・・・・よろしくお願いします。
1   名前： mono ◆7YMtX/NYmu ： 2007/08/03（金） 19:17  ID:LflYcPUE sub-Cl
提示されたソースが記述されているページ(htmlファイル)と
同じフォルダの中に「image」という名前のフォルダはありますか？
また、gi.jpgというファイル名は正確なものですか？
Gi.jpgだったりgi.JPGだったりしませんか。

で、フォルダもファイルも間違いないことを確認したら
"image/gi.jpg"
を
url("image/gi.jpg")
としてみてください。

HTMLの文法ミスについては割愛。
この程度の分量なら文法チェッカでチェックして修正するのもそれほど手間はかからないでしょう。
2   名前： カヅサツ ◆ThCi95HEzw ： 2007/08/03（金） 19:17  ［URL］  ID:O5hEMlpW sub-r2
body { background:#000000 "image/gi.jpg" repeat-x fixed center; color:#FFFFFF; }
↓
body { background:#000000 url("./image/gi.jpg") repeat-x fixed center; color:#FFFFFF; }
3   名前： 匿名 ： 2007/08/03（金） 19:17  ID:Iq7prWSS sub-pq
> 背景の設定なのですが、左下に画像を一個右上に画像を一個置いて、それ以外を黒に指定したいのですが…
と言う事なら、こんなのはどうでしょう？
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'>
<head>
<title>お試し</title>

<style type="text/css">
<!--
body { background: #000000 url(image/gi.jpg) no-repeat fixed left bottom; margin: 0 0 0 0; }
#container { background: url(image/gi.jpg) no-repeat fixed right top; width: 100%; margin: 0 0 0 0; padding: 80px 0 0 0; }
p { font-size: 200px; color: #FFFFFF; text-align: center; }
-->
</style>
</head>

<body>
<div id="container">
<p>
<strong>これは実験です</strong>
</p>
</div>
</body>
</html>
4   名前： エリ ： 2007/08/03（金） 19:17  ID:TwgUP8/V sub-tS
やってみたら出来ました！ありがとうございます！
その先のことも書いていただき本当に感謝です！
5   名前： たびたびすみません…… ： 2007/08/03（金） 19:17  ID:TwgUP8/V sub-tS
教えていただいた
body { background: #000000 url(image/gi.jpg) no-repeat fixed left bottom; margin: 0 0 0 0; }
#container { background: url(image/gi.jpg) no-repeat fixed right top; width: 100%; margin: 0 0 0 0; padding: 80px 0 0 0; }
なんですが
二つ目の部分
#container { background: url(image/gi.jpg) no-repeat fixed right top; width: 100%; margin: 0 0 0 0; padding: 80px 0 0 0; }
の画像が表示されません……一枚目の画像は表示されるんですが……なんででしょう？
聞いてばっかりですみません……
6   名前： 匿名 ： 2007/08/03（金） 19:17  ID:Iq7prWSS sub-pq
>>0

>>3 です。
現在、貴方が書いておられるソースを提示してみてください。
全部をコピペで張っていただいていれば、右下と左上に同じ画像が表示されるはずです。
少なくとも、私の環境では表示されました。（win FierFoix/win IE6）

<div id="container">〜</div>
等が欠落していると、期待した表示が得られないと思われます。
7   名前： エリ ： 2007/08/03（金） 19:17  ID:TwgUP8/V sub-tS
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>お試し</title>
<style type="text/css">
<!--
body { background: #000000 url(image/23.jpg) no-repeat fixed left bottom; margin: 0 0 0 0; #container body { url(image/clip3.jpg) no-repeat fixed right top; width: 100%; margin: 0 0 0 0; padding: 80px 0 0 0; }
p { font-size: 200px; color: #FFFFFF; text-align: center; }
-->
</style>

</head>


<body topmargin="80">
本当に教えてもらったものをコピーペーストをして組み込んだだけです……。
たびたびすみません……
8   名前： mono ◆7YMtX/NYmu ： 2007/08/03（金） 19:17  ID:LflYcPUE sub-Cl
>>3と違ってますね。
ヘンに抜粋してコピペせず、>>3そのままでいいはずでは？
body { background: #000000 url(image/23.jpg) no-repeat fixed left bottom; margin: 0 0 0 0; #container body { url(image/clip3.jpg) no-repeat fixed right top; width: 100%; margin: 0 0 0 0; padding: 80px 0 0 0; }p { font-size: 200px; color: #FFFFFF; text-align: center; }
bodyと#containerそれぞれに背景を表示させたいのに、(結果的に)bodyの背景を上書きしている。
ただし、#containerの子孫にあたるbodyというのは存在しないから適用されてない。
(言い回しが怪しくてごめんなさい)
とじカッコ(})が一つ足りない。
プロパティが正しく記述されてない。

↓こうしてみるとどうですか。
body{ background: #000000 url(image/23.jpg) no-repeat fixed left bottom; margin: 0 0 0 0; }
#container{ background:url(image/clip3.jpg) no-repeat fixed right top; width: 100%; margin: 0 0 0 0; padding: 80px 0 0 0; }
p { font-size: 200px; color: #FFFFFF; text-align: center; }
9   名前： 関 ： 2007/08/03（金） 19:17  ID:TwgUP8/V sub-tS
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>実験</title>
<style type="text/css">
<!--
body{ background: #000000 url(image/23.jpg) no-repeat fixed left bottom; margin: 0 0 0 0; }
#container{ background:url(image/clip3.jpg) no-repeat fixed right top; width: 100%; margin: 0 0 0 0; padding: 80px 0 0 0; }
p { font-size: 200px; color: #FFFFFF; text-align: center; }

-->
</style>

</head>


<body topmargin="80">
<p>
<a name="menu"><strong><font size="200"><font color="#FFFFFF"><div align="center">これは実験です</div></font><strong></a>
<p>
</body>

ちゃんと抜粋せずやってみました……でも、やっぱり右上に表示がされません……他に何か原因があるのでしょうか？エクスプローラーのバージョンとかそういうので……
10   名前： mono ◆7YMtX/NYmu ： 2007/08/03（金） 19:17  ID:LflYcPUE sub-Cl
>>9
なんで名前変えるんですか？
最低限、一つの記事では一つの名前に統一してください。


で、深呼吸を10回位してから、>>6を3回くらい熟読して、
>>9のソースを見てみてください。
11   名前： mono ◆7YMtX/NYmu ： 2007/08/03（金） 19:17  ID:LflYcPUE sub-Cl
あるいはもう>>3のソースを、
スタイルシートの部分だけでなくそのままコピペしてみては。
12   名前： エリ ： 2007/08/03（金） 19:17  ID:TwgUP8/V sub-tS
できました
せっかちですみません……もう少し慎重にやってみます……つまらないことを何度も聞いてすみませんでした。
本当にありがとうございます。
一覧へ戻る