WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:背景(特大壁紙)を中央に固定したい。

0:[投稿] たんぽぽ [2006/03/08 15:50 ] [環境:IE6 わからない]

HP作成初心者です。宜しくお願いします。ジオシティーズで作成を始めました。背景(特大壁紙?)を、中央に固定したいのですが、ここ↓から作成を始めるようになっていたのですが、

<html>
<head>
    <title>名称未設定</title>
</head>

<body bgcolor="#FFFFFF" text="#000000">

</body>
</html>

------------------------------------

色々とネットで説明を探して、以下↓の通りにしてみたのですが、まったく表示されませんでした。私が試してみたのは、下記の通りです。

<html>
<head><style type="text/css">
<!--
body{
background:url(画像のURLを記入) no-repeat fixed center center;
}
-->
</style>

<title>名称未設定</title>
</head>

<body bgcolor="#FFFFFF" text="#000000">

</body>
</html>

------------------------------------

なのですが、何処が間違ってしまっているのでしょうか…。どうぞ宜しくお願い致します。

何か他に方法があったら教えて下さい。宜しくお願いします。


1:[回答] log [2006/03/09 08:49 ]

調べれば分かると思いますが背景は
background-image: url("")でimageが抜けているから表示されないのではないでしょうか?
その他にも気になる点がありますが
http://www.htmq.com/
など参照してみてはどうでしょう。


2:[回答] xhtml? [2006/03/09 10:29 ]

<html>
<head>
<style type="text/css">
<!--
body{
background:#fff url('画像のURLを記入') no-repeat fixed center center;
color:#000;
}
-->
</style>

<title>名称未設定</title>
</head>

<body>

</body>
</html>
CSSの記述は間違っていないと思うのですが、
><body bgcolor="#FFFFFF" text="#000000">
で背景色を背景画像に上書きしているからじゃないでしょうか?
背景画像と背景色を同時に指定すれば画像が優先されるのですが、
CSSの背景プロパティで一括指定してみて下さい。
確認していませんので、間違っていた場合は、すみません。


3:[保留] たんぽぽ [2006/03/09 19:59 ]

logさん、xhtml?さん、ありがとうございます。頑張ってみているのですが、やっぱりうまく行かなくて…。もう少し考えてからまた来ます。ありがとうございます。


4:[回答] SPEA [2006/03/09 22:02 ]

<html>
    <head>
        <title>あいうえお</title>
        <style type="text/css">
            <!--
            body{
            background:url(a.jpg) no-repeat fixed center center;
            color:#000;
            }
            -->
        </style>
    </head>
<body bgcolor="#FFFFFF" text="#000000">

</body>
</html>

これで出来るはずです。
a.jpgの部分を背景画像の相対パスに置き換えてください。

出来なかった原因は恐らくcss部分の#fffではないかと思います。


5:[回答] SPEA [2006/03/09 22:06 ]

しまった・・・>>2さんのソースを見て回答してしまった。

代替案ですが

<html>
    <head>
        <title>あいうえお</title>
        <style type="text/css">
            <!--
            #hoge{
                background:url(a.jpg) no-repeat fixed center center;
            }
            -->
        </style>
    </head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" height="100%" id="hoge">
    <tr>
    <td>あああ
    </td>
    </tr>
</table>
</body>
</html>

でも同じようにできます。


6:[質問] たんぽぽ [2006/03/09 22:42 ]

SPEAさん、こんばんは。ありがとうございます。
回答4と5、2つ共コピーをさせて頂き、貼り付けてみたのですが、やはり画像は表示されずに、「真っ白」なのです…。どうしたらいいのかな…。

<body bgcolor="#FFFFFF" text="#000000">

↑この部分の何かが悪いのかな…。
ネットで見付けた方法は全部試してみているのですが…。
困った…。


7:[回答] AC1号 [2006/03/09 23:21 ]

全員が少しずつ間違っているので指摘しておきます。
>>1
background-*のプロパティをまとめて指定するbackgroundがあります。>>0のCSSは間違いではありません。
なお、挙げられたURLを見ましたが、backgroundプロパティの説明でinheritが欠けているなど、不十分であると言わざるを得ません。

>>2
>>0のようにbackgroundプロパティで、各プロパティ相当の記述を行わなかった場合は、初期値に設定されます。background-colorの初期値はtransparent(透明)です。
一方、HTMLでbgcolor属性が指定されていますが、これはCSSによる指定よりも優先度が低くなります。つまり、body要素に適用されるbackground-colorは、transparentが優先されます。
結果的にはHTML属性でなく、CSSで色を指定するという方向で正しいのですが、理由が多少違うため指摘しました。
なお、色をCSSで指定しようが、HTMLで指定しようが、CSSのbackground-imageには影響を及ぼしません。念のためIE6で表示確認を行いましたが、画像の表示は行っています。したがって、画像が表示されないのは別の原因かと思います。

>>3
>>2のように明示的にbackground-imageを入れることは正しいし、積極的に入れるべきです。>>4のようにcolorプロパティのみの指定でbackground-colorを指定しないのは、アクセシビリティの問題を引き起こします(色の設定によっては文章が全く読めなくなる)。

では何が原因か、と言われると、現時点で出ているソースには問題がなく、ここに書かれていない部分で問題がある、と思います。ValidatorでHTMLやCSSの文法をチェックするのが早道と思います。
http://validator.w3.org/
今出ているソースにはDOCTYPE宣言がないので、validatorは何の文書だか分からないと言うでしょう。このサイトでDOCTYPE宣言について調べてください。


8:[完了] たんぽぽ [2006/03/10 08:04 ]

logさん、xhtml?さん、SPEAさん、AC1号さん、皆さん、本当にありがとうございました。

初心者の私には非常に難しくて、なかなか出来ないので、元が大きな画像だったので、画像を拡大する事で、全画面表示のようにしてみました。それでバックは黒で良かったので、一応はそれでよしとする事にします。

だけどこの事(中央寄せ)については、勉強してゆきたく思っています。また躓くと思いますが、どうぞ宜しくお願い致します。

皆さん、本当にありがとうございまし!


9:[完了] たんぽぽ [2006/03/10 08:05 ]

↑ありがとうございまし「た」!

で、「た」が抜けておりました。すみません…。



[戻る]