横スクロールバーを消して中央表示させる方法

質問

いつもお世話になっております。
さきほど、画面サイズと背景写真について質問させていただいたものです。
教えていただいた結果、ひとまず背景に横1600pxの画像を使用することに致しました。
そこで、ためしに1枚絵の画像を背景として入れてみたのですが、案の定といいますか、、、
横スクロールバーが出てしまい、あげくに中央に表示されていませんでした。
ブラウザや画面のサイズにとらわれず随時中央表示にし、横スクロールが出ないようにする方法を教えていただけないでしょうか？

どうかよろしくお願いいたします。

回答No.6

goldfox · ベストアンサー

＞ただ、画面サイズが小さい場合などはやはり、背景なので縦スクロールできず、下の部分まで見ることができませんでした。
所詮は、「背景」ですから、そういうものです。
小さい画面でも下のほうまで見せたいなら、画像そのものを小さくするとか（大きい画面ではもちろん下のほうは繰り返さないと画像がないので背景色が見える）
あるいは画像全体を見せたいのであれば、ページ内に
<a href="背景画像アドレス">背景全体が見れます</a>
と、リンクをつけるのも一つの手です。

＞現時点では、特に文章などをかんがえていないのですが、仮に画像として挿入した場合は横方向で中央配置かつ、縦方向がうえぴったりで下までスクロールしてみることは可能なのでしょうか？
やろうと思えばできますが、本当にそんなことをする必要があるのでしょうか？
imgで配置しても、背景として利用するなら、
先に回答した「内容の高さを指定する」方法と見た目はなんら変わらないのですが。
つまり、<img>で配置したとしても、「<img>の高さ」でスクロールが出るだけのことなので、「文章がなくても（ブロック要素の）高さを指定している」のと同じなわけです。

もし、「画面ぴったりの大きさに」という条件だと、高さの比率に合わせて「画像のサイズを変える」ことになるので、大きさによっては画像が荒くなります。

回答No.7

leap_day

こんにちは

背景画像だけのページというのもなんか変な感じがしますが・・・

<style type="text/css"><!--
body {
margin:0px;
height:***px;
background-image:url("*******");
background-repeat:no-repeat;
background-position:center top;
}
--></style>

という感じで画像のheightをbody heightに指定すればできるのはできます(別にbodyの背景でなくてもdivの背景としてもできます）

画像でやるのであれば
<style type="text/css">
body {
margin:0px;
}
#back {
margin-left:-800px;
}
#wrap {
width:100%;
text-indent: 50%;
overflow:hidden;
}
</style>

<div id="wrap">
<img src="*******" alt="****" id="back">
</div>

でIE,OperaではできますがFirefoxではtext-indentでは100%内にしないとうまく機能しないのでできません（＞＜）
画像のwidthが50％だったらtext-indent:50%;は効くんですけど・・・

(text-indent:50%)(img width:50%) : 計100％なのでできる
(text-indent:50%)(img width:51%) : 計101％となりできない
(text-indent:-50%)(img width:150%) : 計100％なのでできる
(text-indent:-50%)(img width:151%) : 計101％となりできない

つまり既に画像が1600pxでwidth 100％超えてるのでFirefoxではできません

回答No.5

goldfox

＞どうしても画像が中央表示にできませんでした・
横方向は中央配置で縦方向は上ぴったりから始めたいなら（背景で）

background-position: center top;　…左上を起点に背景画像の位置指定（left、center、right）（top、center、bottom）

で、できるはずですよ。
背景だけを設定したtest.htmlでも作って「center top」を色々変更して、表示確認してみては。
あと、上手くいかないときには、ソースがどうなっているか、ここに1ページ全部書き出して、あなたの書き方に間違いがないか確認してもらうのも必要だと思います。
http://www.htmq.com/style/index.shtml

お礼

ありがとうございます！
background-position: center topを試してみたところ、上ぴったりから表示されました。一歩前進しました。一安心です。

ただ、画面サイズが小さい場合などはやはり、背景なので縦スクロールできず、下の部分まで見ることができませんでした。
現時点では、特に文章などをかんがえていないのですが、仮に画像として挿入した場合は横方向で中央配置かつ、縦方向がうえぴったりで下までスクロールしてみることは可能なのでしょうか？

どうかよろしくお願いいたします。

回答No.4

auty

勘違いだったら申し訳ないのですが、
　　　「縦スクロール」
というのは、Windowのサイズの変更とともに画像が縦に伸び縮みするということでしょうか。

＞＞＞さきほど、画面サイズと背景写真について質問させていただいたものです。

ということで覗いてみたのですが、画像の大きさを変化させるのは、
----------------------------------------------------------------------------
　　　pipi_さんの書かれているJavaScript
----------------------------------------------------------------------------
が、背景ではありませんがなんとなく言われることにあっているような気がします。
そのままで動きますから是非1度実行してみてください。（画像の名前だけ替えればいいわけです。）
皆さんも言われているように背景は難しそうです。

その確認が第一歩ではないでしょうか。

----------------------------------------------------------------------------
それから、ページの変更時の確認ですが、
・　ファイルの保存。
・　ブラウザの更新[ボタン]または再起動等。
は大丈夫でしょうか。

お礼

たびたびの解答ありがとうございます。

前回質問させていただきまして、今の自分の知識では到底無理だということがわかり、参考にした海外のサイト（そこでは背景として挿入されていました）のように、画像の横幅を1600pxにして、中央表示かつ横スクロールしないように表示させようと考えました。

auty様のおかげで横スクロールを消すというとこまでは来たのですが、上から下まで背景だけのhtmlでは画面サイズを小さくしたときに、どうしても表示させたい上の部分の画像まで見えなくなってしまいましたので、なんとか上下のスクロールだけは表示させれないものかと思い質問させていただきました。

ちなみに「縦スクロール」とは画像のリサイズはしないで、単純に上下させることを考えています。

ページの変更のときは必ずファイル保存し、確認しています。

本当にたびたびすみません・・・
もし、お気づきの点などあればどうかよろしくお願い申し上げます。

回答No.3

goldfox

＞縦スクロールが出てこないと、上下の画像が狭く見えたり、F11を押した時や大きい画面などでは上下で空白ができる、と考えているのですが・・・

背景はあくまでも背景なので、（画面領域に表示されない）ページ内容がなければスクロールバーは出ません。
横スクロールバーが出るのも内容の問題ではないでしょうか？
縦スクロールバーがほしければ、内容を作りましょう。

例：
<div style="width:100%; height:1000px; border:1px solid #ff0000;">
<p>縦方向に長く。</p>
</div>
width:100%;……横幅指定。表示領域の100%
height:1000px;……高さ指定
border:1px solid #ff0000;……見て分かりやすいようにブロック要素の枠線指定

background-image: url("back.gif");　…背景画像指定
background-repeat: no-repeat;　…繰り返しの指定
background-position: center center;　…左上を起点に背景画像の位置指定（left、center、right）（top、center、bottom）
background-attachment: fixed;　…ページ内容と一緒にスクロールするかどうか

お礼

ありがとうございます。

特に背景でなくても大丈夫なんですが、画像を上下には目いっぱい見せて、かつ横は画面サイズのみ（横スクロールなし）で見せたいと考えています。

たとえば、背景でなく、普通に画像を挿入して横スクロールを表示させない方法はありますでしょうか？
これだと画像は上下目いっぱいまで、画面サイズにかかわらず見れるとは思うのですが、どうしても横スクロールバーが・・・

お手数をおかけいたしますが、どうかよろしくお願いいたします。

補足

一応何度か試しては見たのですが、どうしても画像が中央表示にできませんでした・・・

横スクロールはoverflow-xで消すことができたのですが・・・

すみません何度も・・・

回答No.2

auty

background-attachment: fixed scroll;
で試してみてください。

お礼

ありがとうございます。

早速試してみたのですが、やはり縦スクロールは出てきませんでした・・・

縦スクロールが出てこないと、上下の画像が狭く見えたり、F11を押した時や大きい画面などでは上下で空白ができる、と考えているのですが・・・

もしかしてそもそもこの考えが間違っているのでしょうか？

できれば、空白が見えたり、上下に関しては画像がカットされないようにしたいのですが・・・

何度ももうしわけございませんが、どうかよろしくお願いいたします。

回答No.1

auty

CSSを使って、

----------------------------------------------------------
<style type="text/css">
<!--
body {
background-image: url("back.gif");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
-->
</style>
----------------------------------------------------------
としてみてください。

"back.gif"は、変更してください。

お礼

ありがとうございます。

おかげ様で、横スクロールは消え、中央表示にもなったのですが・・・
縦スクロールまで消えてしまいました・・・

縦スクロールは残しておきたいのですが・・・
背景でなくても画像を配置でも大丈夫です。

なんとかならないものでしょうか？
ためしに、『ackground-position: center center;』の片方を消してみたのですが、何も起こらずでした・・・

どうかよろしくお願いいたします。

補足

すみません。

説明不足でした・・・できれば縦は通常のままで横だけを中央表示にできれば幸いです。

どうかよろしくお願いいたします。