- ベストアンサー
横長背景をページ読み込みの時真ん中から表示
お分かりになるかた教えていただきたいのですが、 普通はないのですが、ＨＰで横に長い例えば５０００ＰＸぐらいの背景があって、それを普通に表示させると一番左に寄って表示されてしまします。色々試したのですが、この横長背景を真ん中の部分つまり２５００ＰＸあたりをページを読み込んだ時に表示するやりかたはありますでしょうか？ このようなページは普通つくらないとは思いますが、今回は横長ということで考えています。ですが、自分がセンターに読み込みの時に表示させたい、つまり背景画像を作ったときにセンターの位置に表示させたい部分が真ん中に作ったもので、どうにか読み込みの時に左に寄らないで背景を、と考えております。 もちろんスクロールが発生しますが、真ん中表示させて、スクロールは右左ということです。今は左寄りにつめられて表示なので右にしかスクロールしません。。 お分かりの方お力をお貸しください。 どうぞ宜しくおねがいいたします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<a href="#pos">みたいな形でリンクしておけば、その場所にスクロールします。 <a name="pos" id="pos" style="position:absolute;top:0;left:2500px;"></a> もしくは <script type="text/javascript"> onload=function(){ scrollTo(2500,0); }; を書いておくかですね。 > ですが、自分がセンターに読み込みの時に表示させたい、つまり背景画像を作ったときにセンターの位置に表示させたい部分が真ん中に作ったもので、どうにか読み込みの時に左に寄らないで背景を、と考えております。 すみません、わかりません。 <body style="background-image:url(image.jpg); background-position: top -2500px;"> としておけば、画像の左側2500ピクセル分を隠せます。 余談ですが、<a>については色々云われがありますが、 スクロール（アンカー）を目的として<div id="pos"></div>という空の要素を入れるくらいなら、 「アンカーを意味する<a>」を使う方が良いと、私は思います。 ブロック要素が必要でnameを使いたくなければ <div style="略"><p style="width:0;height:0;overflow:hidden;"><a id="pos"></a></p></div> とするのが良いと思いますが、あくまで私見ですので、悪しからず。 写真の表示のさせ方次第で、他にもっと適切な方法はあると思いますが。
その他の回答 (2)
良く解らないので再度質問を整理して解り易く説明して下さい。 5000pxの画像なんて普通は表示させませんよ。
補足
そうなのです。普通はそんなに横に長い写真などは表示させないのですが、今回は、例えば３６０度のパノラマ写真があったとします。 写真で言えば、４枚とか５枚の写真が合成でくっついているようなものです。 で、その１枚分がモニターに納まる感じで映るのですが、 このパノラマを画像を縮小などしないで、そのまま横スクロールで ＨＰにしたいＩＭＧとして貼り付けたいということなのです。 もちろん普通はそんなことしないのですが、あえて今回はということなのです。 ですので、４枚の写真が連なったパノラマ写真を横スクロールでということです。 そのパノラマ写真を表示する時に左端から表示をしないで、ブラウザが読み込んだら真ん中を表示させたいということです。 真ん中がデフォルトの表示設定ですので、横スクロールが右左になるということです。 説明が上手くなくて申し訳ないのですが、お力をお貸しいただけないでしょうか。なにとぞ宜しくおねがいいたします。
- goldfox
- ベストアンサー率49% (123/249)
＞もちろんスクロールが発生しますが、真ん中表示させて、スクロールは右左ということです。 背景として配置ではなく、<img>でということですか？ 背景でいいなら、スタイルシートのbackground-positionでどうとでもなりますけど、imgだとJavaScriptが必要になるんじゃないでしょうか。 ラベルリンクでできたかな？ ちょっと確認しないと分かりませんけど。 background-position http://www.tagindex.com/stylesheet/page/background_image3.html
お礼
本当にありがとうございます。助かりました。 こちらの <script type="text/javascript"> onload=function(){ scrollTo(2500,0); }; であれば、今後横のサイズが変わったときにでも値を変えることによって好きな位置をセンターに持ってこれるので重宝しそうです。 本当に普通ならこんなことはしないのですが、普通だから普通じゃないことをやってみようということになりまして。。。。 写真の表示のさせ方は色々とサイトを観て回っては探しているのですが、今回のものはあまりに無謀？なということもありまして、見つけることができなかったものですから。 とにかく、ほんとうにありがとうございました。 私ももっと勉強をしまして自分で解決できるようになれるようにがんばりたいと思います。 お手数をおかけいたしまた。