ホームページの背景画像についての質問です。
自分なりに調べてはみたのですが、
よい答が見つからなかったため質問させていただきます。
http://jamaikaumarenorasutaneko.web.fc2.com/
上記のようなホムペを作っているのですが、
トップ画面の背景がブラウザによっては画像のサイズが足りず右側に白い空白ができてしまいます。
また、逆に画像が大きく全てを表示しきれないケースもあると思います。
お気に入りを常に表示させている場合はもちろん後者のケースにあたると思います。
もちろんブラウザによって表示が異なってしまうのは承知しているのですが、
それをタグやれスタイルシートやれで自動調整はできないものでしょうか?
希望としては、
画面サイズの異なるPCで表示させたとき、
指定した画像の全てがどのPCでも表示させられる。
例えば「Microsoft Office Picture Manager」で画像の編集(サイズの変更)をしたときの、拡大&縮小を画面サイズに合わせて自動で行ってくれる、
そんなタグを探しています。
欲を言えば「お気に入り」を表示していてもそれすら自動調整されるといいです。
かなり分かりにくい説明になってしまってすみません。
ご教授よろしくお願いします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんにちは。
背景として横幅いっぱいの表示は残念ながらありません。
画像を横幅いっぱいに表示させ、それを背景として利用する方法でしたらあります。
どのように指定されているかの記載がなかったため、
勝手ながらでちょっとソースを拝見させて頂きました。
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が見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
背景画像の設定についてです
-
ブログの背景について
-
tiffのlzw形式とg4形式の違い
-
jwwからJPEG
-
ネット上のgif形式画像が保存で...
-
wordからjpg、gif、pngへ
-
Wordpressの画像の削除について
-
アップ済の画像等を削除したい
-
楽天ブログに写真を載せたいの...
-
画像リンクのURL
-
JUGEM 。ポップアップブロック
-
ライブドアブログのプロフィー...
-
エキサイトブログのロゴ画像
-
NCフライス盤で、工作物を削っ...
-
ISOとVROはどちらが保存に最適?
-
アフィリエイト(FC2ブログ)
-
gooブログの写真の枠を取りたい
-
写真を第三者に閲覧してもらう...
-
動画の保存について
-
gooのブログで画像を削除したい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
アメーバーブログで余計な空白...
-
コメント部分を透かして背景画...
-
マウスオーバー時の画像とCSSに...
-
IE以外のブラウザで背景を固定...
-
FC2 BlogPet背景
-
FC2ブログ トップ画像につ...
-
楽天ブログでの背景画像設定に...
-
livedoor blog でcontainerの背...
-
アメブロについて聞きたいので...
-
写真の背景を消したいのですが...
-
アメブロ、カスタマイズでタイ...
-
geoに違反しているよと指摘...
-
アメブロでサイドバーのカスタ...
-
画像の加工
-
背景透過の画像を共有した際に...
-
livedoorブログのヘッダの変更...
-
tiffのlzw形式とg4形式の違い
-
ネット上のgif形式画像が保存で...
-
wordからjpg、gif、pngへ
-
パワーポイントをPDFに変換した...
おすすめ情報