いつもお世話になっております。
さきほど、画面サイズと背景写真について質問させていただいたものです。
教えていただいた結果、ひとまず背景に横1600pxの画像を使用することに致しました。
そこで、ためしに1枚絵の画像を背景として入れてみたのですが、案の定といいますか、、、
横スクロールバーが出てしまい、あげくに中央に表示されていませんでした。
ブラウザや画面のサイズにとらわれず随時中央表示にし、横スクロールが出ないようにする方法を教えていただけないでしょうか?
どうかよろしくお願いいたします。
No.6ベストアンサー
- 回答日時:
>ただ、画面サイズが小さい場合などはやはり、背景なので縦スクロールできず、下の部分まで見ることができませんでした。
所詮は、「背景」ですから、そういうものです。
小さい画面でも下のほうまで見せたいなら、画像そのものを小さくするとか(大きい画面ではもちろん下のほうは繰り返さないと画像がないので背景色が見える)
あるいは画像全体を見せたいのであれば、ページ内に
<a href="背景画像アドレス">背景全体が見れます</a>
と、リンクをつけるのも一つの手です。
>現時点では、特に文章などをかんがえていないのですが、仮に画像として挿入した場合は横方向で中央配置かつ、縦方向がうえぴったりで下までスクロールしてみることは可能なのでしょうか?
やろうと思えばできますが、本当にそんなことをする必要があるのでしょうか?
imgで配置しても、背景として利用するなら、
先に回答した「内容の高さを指定する」方法と見た目はなんら変わらないのですが。
つまり、<img>で配置したとしても、「<img>の高さ」でスクロールが出るだけのことなので、「文章がなくても(ブロック要素の)高さを指定している」のと同じなわけです。
もし、「画面ぴったりの大きさに」という条件だと、高さの比率に合わせて「画像のサイズを変える」ことになるので、大きさによっては画像が荒くなります。
No.7
- 回答日時:
こんにちは
背景画像だけのページというのもなんか変な感じがしますが・・・
<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
- 回答日時:
>どうしても画像が中央表示にできませんでした・
横方向は中央配置で縦方向は上ぴったりから始めたいなら(背景で)
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
- 回答日時:
勘違いだったら申し訳ないのですが、
「縦スクロール」
というのは、Windowのサイズの変更とともに画像が縦に伸び縮みするということでしょうか。
>>>さきほど、画面サイズと背景写真について質問させていただいたものです。
ということで覗いてみたのですが、画像の大きさを変化させるのは、
----------------------------------------------------------------------------
pipi_さんの書かれているJavaScript
----------------------------------------------------------------------------
が、背景ではありませんがなんとなく言われることにあっているような気がします。
そのままで動きますから是非1度実行してみてください。(画像の名前だけ替えればいいわけです。)
皆さんも言われているように背景は難しそうです。
その確認が第一歩ではないでしょうか。
----------------------------------------------------------------------------
それから、ページの変更時の確認ですが、
・ ファイルの保存。
・ ブラウザの更新[ボタン]または再起動等。
は大丈夫でしょうか。
たびたびの解答ありがとうございます。
前回質問させていただきまして、今の自分の知識では到底無理だということがわかり、参考にした海外のサイト(そこでは背景として挿入されていました)のように、画像の横幅を1600pxにして、中央表示かつ横スクロールしないように表示させようと考えました。
auty様のおかげで横スクロールを消すというとこまでは来たのですが、上から下まで背景だけのhtmlでは画面サイズを小さくしたときに、どうしても表示させたい上の部分の画像まで見えなくなってしまいましたので、なんとか上下のスクロールだけは表示させれないものかと思い質問させていただきました。
ちなみに「縦スクロール」とは画像のリサイズはしないで、単純に上下させることを考えています。
ページの変更のときは必ずファイル保存し、確認しています。
本当にたびたびすみません・・・
もし、お気づきの点などあればどうかよろしくお願い申し上げます。
No.3
- 回答日時:
>縦スクロールが出てこないと、上下の画像が狭く見えたり、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
- 回答日時:
background-attachment: fixed scroll;
で試してみてください。
ありがとうございます。
早速試してみたのですが、やはり縦スクロールは出てきませんでした・・・
縦スクロールが出てこないと、上下の画像が狭く見えたり、F11を押した時や大きい画面などでは上下で空白ができる、と考えているのですが・・・
もしかしてそもそもこの考えが間違っているのでしょうか?
できれば、空白が見えたり、上下に関しては画像がカットされないようにしたいのですが・・・
何度ももうしわけございませんが、どうかよろしくお願いいたします。
No.1
- 回答日時:
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;』の片方を消してみたのですが、何も起こらずでした・・・
どうかよろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- その他(動画サービス) VLCメディアプレーヤーについて 1 2022/11/29 14:19
- その他(ソフトウェア) ペイントで切り抜いた画像の背景を透明に 2 2022/09/15 10:20
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
- iPhone(アイフォーン) 同じ写真と動画をiOSが検出する便利な機能 写真のアルバムタブにて、画面を一番下までスクロールすると 3 2023/01/23 15:41
- その他(プログラミング・Web制作) webデザインです。 プログラミンでの質問なのですが 手動でpc画面を下にスクロールするとスクロール 1 2022/10/10 22:01
- レトロゲーム ファミコンのインベーダー。なぜ左右に動けるのか? 1 2022/07/05 14:19
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
lightbox2で画像を天地左右中央...
-
LightBoxの矢印の出し方
-
IMGタグで画像の繰り返し使用は…
-
ページの上下に白い横線が入る
-
background-repeat CSS で切れ...
-
CSSで背景画像をランダムに表示...
-
背景画像をウィンドウサイズに...
-
画像をリンクボタンにして文字...
-
画像とその下にあるテキストの...
-
background-sizeの背景で最小値...
-
コーディング中、右側に謎の余...
-
CSSだけでサムネイルから拡大画...
-
background-sizeでcontainする...
-
gif画像でたまに背景がグレーに...
-
画像を左下と右下に固定したい...
-
スクロールすると追従する画像...
-
横棒GIF左右ぴったしにするタグ...
-
画面サイズに合わせて背景の写...
-
jQueryでCSSの背景画像を切り替...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
lightbox2で画像を天地左右中央...
-
background-sizeの背景で最小値...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報