作っているページ内に背景を表示させるには

質問

勉強不足で申し訳ありませんが、ホームページを独学で作成しています。

横幅９５０ピクセルのサイトを、中央表示させるように考えています。

その９５０ピクセルの左上の部分に、（繰り返しの無い）背景画像を表示させたいのですが、
CSSファイルにbackgroundで指定してやると、どうやら表示する画面のサイズに左右されるらしく、
範囲外に背景画像が出たり、自分が考えているのとは違う位置に表示されてしまいます。

ページ内のひとつの要素として、背景画像のように扱えるイメージを挿入するには、どうすれば良いでしょうか。

回答No.3

naokita

そりゃbodyに背景画像を設置しているのだから、
bodyの背景は、bodyの位置に左右されるので、メインコンテンツによって隠れようがどうでもよく、bodyの背景として忠実に位置する・・・当たり前の話。

色々方法はあるけど、
まあ、単純な方法は、bodyと現在のdivの間に、
950px以上の新しいdivを入れてceter表示、それに背景画像を入れれば、950pxの外側と新divの間に画像を配置できる。
こうすれば、ブラウザを狭くしても左側で画像が隠れる事はありませんし、幅を指定するのだからコンテンツの左側ピッタリに配置できる。
サイドバーを配置するようなイメージ。

当然、メインコンテンツの外側に配置するようなpositionでも可能だし、
画像を保存する際に、右側の隙間を大きくして（幅1050pxとか）で保存して、
body{background:url( ) 50% 40px no-repeat;}でも良いです。
但し、bodyへの配置なのだからブラウザ狭くするとコンテンツの位置が左一杯まで寄るわけで、この画像は隠れる。

お礼

うわぁ、これは目からウロコでした！

凄いですね、こんな方法想像すらできませんでした。

自分の作った範囲外に背景画像が出るので困っていたのですが、「それが当たり前の話」なのは分かってはいますが、ではどうすれば良いのだろうか、という質問でした。

画像幅を変えたものを使う・・・知識がないので、またいろいろ工夫し悩まないといけないですが、道が見えてきた気がします。

画像もあって、非常に分かりやすかったです。

回答、ありがとうございました。