- 締切済み
背景画像の自動調整
ホームページの背景画像についての質問です。 自分なりに調べてはみたのですが、 よい答が見つからなかったため質問させていただきます。 http://jamaikaumarenorasutaneko.web.fc2.com/ 上記のようなホムペを作っているのですが、 トップ画面の背景がブラウザによっては画像のサイズが足りず右側に白い空白ができてしまいます。 また、逆に画像が大きく全てを表示しきれないケースもあると思います。 お気に入りを常に表示させている場合はもちろん後者のケースにあたると思います。 もちろんブラウザによって表示が異なってしまうのは承知しているのですが、 それをタグやれスタイルシートやれで自動調整はできないものでしょうか？ 希望としては、 画面サイズの異なるPCで表示させたとき、 指定した画像の全てがどのPCでも表示させられる。 例えば「Microsoft Office Picture Manager」で画像の編集（サイズの変更）をしたときの、拡大＆縮小を画面サイズに合わせて自動で行ってくれる、 そんなタグを探しています。 欲を言えば「お気に入り」を表示していてもそれすら自動調整されるといいです。 かなり分かりにくい説明になってしまってすみません。 ご教授よろしくお願いします。
- rasutaneko
- お礼率26% (8/30)
- ブログ
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- haluo
- ベストアンサー率71% (5/7)
こんにちは。 背景として横幅いっぱいの表示は残念ながらありません。 画像を横幅いっぱいに表示させ、それを背景として利用する方法でしたらあります。 どのように指定されているかの記載がなかったため、 勝手ながらでちょっとソースを拝見させて頂きました。 top.html内 まず、既にある<body>内の諸々の指定は消してください。 で、シンプルになった<body>直後に、背景として指定したい画像を <img src="img/268.jpg" width="100%" style="position:absolute; top:0px; left:0px; z-index:1;"> として指定します。 これで、268.jpgを横幅をブラウザの100%の大きさに広げて、且つ左と上の隙間なく、さらに一番下に敷いときます、という指定がなされます。 それ以降に、表示させたい文字や画像のエリアを <div>で囲み、そのdivにはz-index:2;か何か、1以上の整数で指定してあげてください。 ※z-indexは重なりを調整するCSSです。 例えば <div style="position:absolute; top:10px; left:10px; z-index:2"> <p>タイトル<br> hogehogehogehoge</p> </div> という感じですかね。 ここのdivで、一番下に敷いたものの上と左から10pxの隙間を空けて表示します。で、重なりは2番目です、という指定がなされます。 topとleftの位置調整はご自身で設定されてください。 全てのブラウザおよびwebにあげて確認したわけではないので 完璧な方法ではないかもしれませんが こういう方法もあると言う事で。頑張ってください。 ちなみに背景が暗い場合は、文字の色は明るくしてもらえるとユーザは助かりますよー。
関連するQ&A
- ホームページ内の画像のサイズの自動調整について
ホームページを作成していますが、閲覧する側の画面サイズに合わせて画像の高さ等を調整する方法等はありますでしょうか？ 全画面表示にした時に画像を自動的に大きくみせるなど調整をしたいのですが・・・縦フレームに設定している画像が通常時は画面内にぴったり収まってるのですが全画面表示にすると、一番したが白抜けの状態になってしまいます。 スクリプトを使用する方法ではなさそうなのですが・・ http://www.bonjovi.com/bonjovi/ のサイトのように画像を自動調整したいのです。 どうか教示願います。
- ベストアンサー
- ブログ
- デスクトップ背景の画像
デジカメで撮ったjpeg画像を、デスクトップ背景にする場合に、うまくデスクトップ画面サイズに合うようにならず、縦横比が変わった歪んだ画像やら画像の一部だけが現れるようなデスクトップ背景になります。 もちろん「画面のプロパティ」で調整をしても、です。 特に歪む（縦横比が変わる）ことについて、そもそも「画面のプロパティ」の「表示位置」にある3種類の表示方法「拡大」「中央」「並べて」を選び変えて画像が歪むというのはどういうことでしょうか。 これはどこで調整すればうまく表示できるのでしょうか。 詳しい方ご教示よろしくお願いします。
- ベストアンサー
- Windows XP
- （ソース）背景画像表示をモニターサイズに自動で合わ
ブラウザーの質問ではなく、ソーススクリプトの質問なのですがm(__)m webページソースで、backgroundで表示させる画像を java ｓｃｒｙｐｔ でスライドショー 表示させています。 モニター、ブラウザー全画面表示サイズよりサイズの小さいサイズは、余白表示、、 カメラまんまの高精細サイズ写真は当然一部しか表示し切れません。 閲覧者側のモニターサイズも、ブラウザーでの画面表示サイズもまちまちなわけなので、 どの大きさのピクセル画像サイズでも自動で縮小・拡大（FAX＆VIEWERのように） 表示ウィンドウサイズにピタリおさまる表示を自動でするようなスクリプトをご存知でしたらお教えくださいm(__)m
- ベストアンサー
- ブラウザ
- 画像を背景に
aimewでHPを作っていて困ってます。 PCから見ると真ん中に色の背景があってページなど があるんですけど、真ん中以外に壁紙をはりたいんです。 bodyのタグを使ったんですけど、表示されません。 で、編集のところをみるとbodyのタグが消えています。 画像を背景にする場合どうしたら表示されますか？
- ベストアンサー
- その他（インターネット・Webサービス）
- 背景の画像だけが・・・・
ＦＲＯＮＴＰＡＧＥ２０００を使ってＨＰを作成しています。 実は、タイトルにも書いたとおり背景の画像だけがプレビューで表示できないのです。 書式やファイルのところも確認し、タグも見てみましたが特に問題はないようでした。（背景の色も自動にしてあります） 不思議なのは、同じところに収納したあるいくつかの画像から挿入した画像は全部表示出来ているのに、背景だけが出てこないというのが非常に不思議です。 どのような原因があって、どういう解決法があるのでしょうか？
- ベストアンサー
- オフィス系ソフト
- 画面サイズにあわせて自動で画像表示サイズがかわる
HTMLタグか、Javaかわかりませんが・・・。 閲覧者の画面サイズにあわせて、画像表示サイズが自動で変わる方法を教えてください。 実際に画像表示が自動で変わっているＵＲＬを見ると、最後の拡張子はhtmlではなく、gifでした。 ちなみに、携帯ではなくＰＣ上での表示方法をお願いします。
- ベストアンサー
- HTML
- 背景に画像が表示されない
パソコン初心者です。今は頑張ってサイト作りをしているところなのですが、背景に画像が表示されません。 初めは正常に表示されていたのですが、ふと気づいたらいつのまにか表示されなくなっていました。 タグやファイル名なども何も変えていないはずなのですが・・・。 それとお気に入りに入っているサイトをいつもどおりに開いてみたら、そのサイトの背景画像も表示されていませんでした。（そのサイトさん自信が背景画像をとったり変えたりなどはしていないようです） これはパソコン自体に何か問題があるということなのでしょうか？ 分かりにくい部分があるかもしれませんが、教えてくださるととても助かります。
- ベストアンサー
- Windows XP
- ホームページの背景画像について
HPをつくっていて背景画像を指定しているのですがブラウザで 文字サイズを大きくすると背景画像を文字がはみだしてしまいます。 ブラウザの文字を大きくしたら背景画像もそれにあわせた大きさになるように する方法は何かないものでしょうか？
- 締切済み
- その他（インターネット・Webサービス）
- ブログの背景画像のサイズを固定したいです
宜しくお願いします。 ブログの背景画像を変更したく、一枚の写真（フリー素材です）を使用しブログの背景に設定したのですが、スマートフォンの所謂PC表示にすると画像が拡大してしまいぼやけた状態になってしまいます。 デスクトップ、ラップトップPCのブラウザですと普通に表示されます。 スマホ用PCブラウザではなぜか画像が異常に引き伸ばされてしまうのです。 CSSではライブドアブログのかんたん背景画像という機能を使用しており、 /* かんたん背景画像 */ body.show-bg-image { background-attachment: fixed; background-repeat: no-repeat; background-size: cover; のように設定されています。 スマートフォン用のPCブラウザからでもデスクトップPCブラウザで見たときのように画像を固定（一枚絵）し、サイズもスマートフォン向けPCブラウザで見たときに適合するようにしたいのですが方法が分かりません。 自分でも色々調べ、リピートの設定やスクロール、コンテイン等をいじってみましたが素人知識ではまったく改善されず困っております。 お詳しい方是非ご教授、お力添えを頂きたく存じます。 宜しくお願い致します。
- ベストアンサー
- CSS
お礼
ご回答ありがとうございました。 大変勉強になりました。 今回は画像サイズの影響等もあり、 思ったようにいかない点もでてしまったため、 反映はさせませんでしたが、 いずれ自分がレベルアップしたときに使わせていただきます。