固定背景画像と画面幅について

質問

初心者のため、分かりづらい質問になると思いますがお許しください。

background-repeat:no-repeat;
background-position:right;
background-attachment:fixed;

上記のようなCSSで背景画像を固定しています。
画面幅は918pxで設定していますが、これをプレビューで918px以上に伸ばすと、背景画像がどんどん右にズレていってしまいます。
画面環境はそれぞれだと思うので、大きな画面で見た方が背景画像が切れてしまうのを避けたいです。
画面幅918pxで固定をしたいのですが、どのようにすればいいのでしょうか？

何か補足事項があればすぐに追記します。
よろしくお願いします。

回答No.3

noname#83877 · ベストアンサー

だいたいは飲み込めたと思います。
まず、backgroundの指定する要素は今回はbackground-attachment:fixed;を使うのでbodyに指定してください。
他の要素に指定するとたしか一部のIEのバグで一緒にスクロールされます。
それで、普通であればこの指定だけで右が切れることは無いのですが、もしかしてbodyに対してwidthを指定されていませんか？
widthを指定するのであればbody内を全部divで囲い、そのdivに対して指定すれば上手くいくと思います。
もしwidthの指定も問題ないようであれば他のプロパティが関係しているのかもしれません。それはさすがにソースを見ないとなんとも言えないです。

ちなみにヘッダー、フッター、メイン等に分けて管理するのは確かに仕事としての効率を考えると必要なのですが、それが常に最適な手法であるかと言えばそうではありません。
こういう管理をすると常にdivでのグループ化が必要になると思いますが、むしろ無駄なタグは最適化を考える上では排除するほうが好ましいです。
個人サイトならbodyの次にh1がすぐ来る方が良いぐらいです。
ただしヘッダー、フッター、メイン等の名称はid名として使って損はありません。
特にh1要素にid="HEADER"のような指定は意外と多いのではないでしょうか？

お礼

お返事が遅くなり申し訳ございません。
画面にwidthの指定は一切していませんでした。
この指定はそもそも必要なのでしょうか？

といいますのも、私がこのベースを作っていた参考書にはこういう指定がなかったので、そのまま作業を進めてきたのですが、
他の参考書はほとんどがボックス化されているので、
多分そういう風にしていく方がいいんだろうな．．．と修正を決意したわけなんです。

先日教えて頂いた、「横型のナビゲーションバーを画面いっぱいに伸ばしたい」というのもこのボックス化する事で、なんだかおかしな表示になっちゃうし、（どうしよー。。。）と困っていました。

もし、横幅を設定する場合はどうやってサイズを決めているのですか？
（私が試みた918ｐｘというのはナビゲーションバーの長さでした。）

できれば、もうワイドの指定はしなくないです．．．ハマるのが嫌です。（；＿；）
何度もすみません、よろしくお願いします。

回答No.2

noname#83877

よくのみこめてないのですが、

・画面の幅に合わせて背景画像が拡大縮小する
・画面の右（上？中？下？）に背景画像があり、画面の幅にに合わせて位置が移動する
・画面の中央に背景画像があり、918pxで固定されて幅に関係なく常に中央表示される

など、もう少し細かいビジョンが無いと説明し辛いのではないかと思います。

補足

ありがとうございます。

背景画像として使っているのは、大きなマークひとつです。
これを画面の右端に固定させるようなデザインにしています。
スクロールしても常に同じ位置で画像が表示されているデザインです。

今まではボックスを作らない（全体のワイドサイズを設定していない）で、作業を進めていました。
この時は画面を大きくしても常に固定した背景画像は一緒にくっついてくる感じで、希望通りの表示になっていました。

で、いろいろと進めていく中でヘッダー、メイン、フッター、などのボックスを設定している参考書書籍がかなり多く、
ふと今の設定（bodyの次にいきなりh1タグを設定している感じ）が
「間違っているかな？」と思い、ボックス化を試みたのです。

そのときに画面のワイド幅（918px）を設定し、
試しに918px以上に画面を横に伸ばしたときに、固定していた背景画像がどんどん右から切れていってしまったのです。
逆に画面幅を狭くする場合は問題ないです。

非常に分かりづらい説明で申し訳ないです。

回答No.1

ORUKA1951

発想が逆です。
　画面幅の固定はは、そもそも避けるべきかと思います。
　画面幅を固定して画像もno-repeatだと、幅の広いディスプレイでは切れてしまうし、狭いとはみ出るし。
　HTMLの根幹に関わる最も重要な部分
「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 」
2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )より引用。

　HTMLはDTP( http://ja.wikipedia.org/wiki/DTP )とは、まったく逆の発想で作られたものです。そのようなページを作るなら、PDFなどもっと優れた技術があります。
　確かに初心者の最も間違う部分ではありますが・・・・。もちろんウェブに公開しないで自分だけで見るなら、そのままで良いとは思います。
　紹介した仕様書のページをもう一度読み返してください。

　それでも、HTMLの理念に逆らってまで画面幅を固定しますか？

お礼

早速ありがとうございます。
実は、画面幅はさっきまでは固定していなかったんです。

当方初心者のため、参考書籍を読みながらときにはソースを参考にしながら作業をしているのですが、私の解釈の仕方が間違っていなければ、それらの参考書の中でのレイアウトで、#containerで大枠を作り、その中に#header、#main、#sub、#footer．．．などの設定をしているものが多く、それまでに設定せずに作っていたのが間違っていたのかな？
と思うようになって今回の作業をしました。（#containerを作って全体幅を設定した）

今回こういう表示になってしまった事で、本来ならばもとの表示（画面幅に応じて背景画像が固定されたまま移動する）に戻したい気持ちがあります。