- ベストアンサー
背景画像をブラウザサイズに合わせる方法。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ついさっき別の質問で似たようなケースがあったが、 その参照サイトが jQueryで、 http://puzzel.jp/blog/sample/s15/ 文法とか気にしなければ、最単な方法で、 <body style="margin:0; padding:0;"> <img src="***" width="100%" alt="*" style="position:absolute; top:0; z-index:-1;"> 最小幅 min-width: ; も必要かな。高さをどうするのか・・・
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。 私は、最初のウェブページを作成して１４年になりますが、最も、際立ってアクセスが多いのは、HTML2で、参考書を見ながら率直に書かれたページなのです。3.2の時代に一時期TABLEで凝ったデザインのページを作成していましたがまったく訪問者もなく、HTML4.01が登場して５年たってから、率直なHTMLに戻しました。 文書構造に逆らってまで見栄えをこだわっても逆効果なことを何度も何度も経験しています。ユーザーはデザインを見るために訪問してくるんじゃない、内容こそ目的だと思っています。ですから、正しく文書の内容に沿ってマークアップされているかと、Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )などでのチェックは欠かしません。 背景はあくまで文書に関係ない背景ですから画像としてマークアップするのは薦めません。それだけは忘れないでくださいね。
お礼
ありがとうございます。 私もそう思うのですが…クライアントからの要望でやむなく手を出している次第です。 ご意見、肝に銘じておきます。 ありがとうございました！
- naokita
- ベストアンサー率57% (1008/1745)
NO.2回答者 naokitaです（お礼拝見済み） ＞まだまだ勉強が必要ですが… その手の方法は、ほぼ使わないから勉強する意味が薄いでしょう・・・ 正直、不具合もあるからあまり勧めないです。 （自分はまず使わないですね） 背景画像も特大画像なんて使わない方が良い。 ----------- ついでに、 もう数年したらCSS3がメインになるから、 今の内に基礎知識程度（混乱しない程度に）は学んだ方が良いかも。 background関係のCSS3だけでも、かなり便利で簡単にクオリティが高くなりますよ。 拡大縮小は、 background-size: ; だけでOKになるので。 伸縮背景画像は、 今は、jQueryにしろCSS,CSS3にしろデメリットもあるので、 他のCSSのように安易に使わない方が良いって事です。
お礼
ありがとうございます。 やはり基本から外れてしまうことは多用すべきではないんですね。 jQueryを勉強してみようと思っているのですが、それも無駄になるかもしれませんね…。 CSS3のほうを優先してやってみようと思います。 丁寧なアドバイス、ありがとうございました！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
基本的には、できません。 HTMLの要素は インライン要素とブロック要素に分けられ、それぞれに置換要素と非置換要素があります。 imgは、非置換インライン要素なのでそのサイズは内容物の大きさによって決まります。ブロック要素はそれが含まれる親コンテナブロックの内寸を参照します ということは、背景画像ではなくオブジェクトとしてHTML内におき、そのオブジェクトに対して display:block; width:100%; height:auto; とするしかありません。 ただし、HTML的には背景ではなく画像としてマークアップされるため好ましくはありません。 例) <body> <div class="header"> <h1><img src="./images/topLogo.jpg" width="480" height="100" alt="ようこそ私のサイトへ"></h1> </div> <div class="section body"> <h1>本文</h1> <p>段落</p> </div> </body> だとすると div.header{width:80%;max-width:760px;margin:0,auto;border:solid 1px white;} div.header h1 img{display:block;width:100%;height:auto;}
お礼
ご丁寧にありがとうございます。 簡単にはいかないんですね…。 早速やってみます。 ありがとうございました。
関連するQ&A
- ホームページの背景画像について
HPをつくっていて背景画像を指定しているのですがブラウザで 文字サイズを大きくすると背景画像を文字がはみだしてしまいます。 ブラウザの文字を大きくしたら背景画像もそれにあわせた大きさになるように する方法は何かないものでしょうか？
- 締切済み
- その他（インターネット・Webサービス）
- テーブルセルの背景画像のサイズ設定について
お世話になっています。 <table>タグで背景に画像を指定しています。 その際、セルの大きさに合わあせて背景画像を拡大縮小したいと思い backimage{ background-image:urL(../img/XXX.jpg); background-repeat:no-repeat; background-size:100% 100%; } というスタイルをつくりました。 IE９やFireFoxではこのスタイルが適応されるのですが、IE８、IE７といった現在主流のブラウザでは 適応されません。 調べたところIE7、IE8は対応していないとのことでした。 仕様上セルの大きさを固定することはできません。 IE8、IE7で同じようにセルサイズに合わせて背景画像のサイズを変える方法がありましたら教えてください。
- ベストアンサー
- HTML
- ブラウザをサイズ変更してもコンテンツが乱れない方法
Webサイトを初めて作っており、現在はヘッダーの部分を作成しております。 「h1」を使い、見出しの文章に背景色も入れたのですが、ブラウザを縮小すると改行してしまいます。 多くのWebサイトでは、カーソルでブラウザの端をクリックしてサイズを変更しても、文章は改行しませんし、全コンテンツは中心によってくれます。 ブラウザを縮小しても文章を改行しない方法と、ブラウザのサイズを変更しても常にコンテンツを中心によせるにはどうしたら良いのでしょうか？ HTMLとCSSを使った方法で教えて下さい！！ ※ちなみに、現段階では、背景のある見出しと、その下に画像（Webサイトの名前）を置いております。
- ベストアンサー
- CSS
- HTML作成中：背景の画像をブラウザいっぱいに表示させる方法
FrontPage2000を使ってＨＰを作っています。背景画像が、ブラウザの横幅の７割くらいしかないため、ブラウザの右端が背景画像の左端で埋められているのです。 つまり、２枚の同一画像が横並びになっていて、１枚目と、２枚目の途中までが表示されているのです。ブラウザの左端に、たとえば「お気に入り」を表示すれば、ぴったりと１枚の画像になります。 １枚の画像を、モニタやブラウザに合わせて拡大して表示してくれるようにするにはどうすれば良いでしょうか？ ちなみに、背景画像の設定は以下のとおりです。 <body bgcolor="#FFFFFF" text="#000000" style="background-image:url('bear.jpg');background-attachment:fixed;" >
- ベストアンサー
- その他（インターネット・Webサービス）
- ブログの背景画像のサイズを固定したいです
宜しくお願いします。 ブログの背景画像を変更したく、一枚の写真（フリー素材です）を使用しブログの背景に設定したのですが、スマートフォンの所謂PC表示にすると画像が拡大してしまいぼやけた状態になってしまいます。 デスクトップ、ラップトップPCのブラウザですと普通に表示されます。 スマホ用PCブラウザではなぜか画像が異常に引き伸ばされてしまうのです。 CSSではライブドアブログのかんたん背景画像という機能を使用しており、 /* かんたん背景画像 */ body.show-bg-image { background-attachment: fixed; background-repeat: no-repeat; background-size: cover; のように設定されています。 スマートフォン用のPCブラウザからでもデスクトップPCブラウザで見たときのように画像を固定（一枚絵）し、サイズもスマートフォン向けPCブラウザで見たときに適合するようにしたいのですが方法が分かりません。 自分でも色々調べ、リピートの設定やスクロール、コンテイン等をいじってみましたが素人知識ではまったく改善されず困っております。 お詳しい方是非ご教授、お力添えを頂きたく存じます。 宜しくお願い致します。
- ベストアンサー
- CSS
- 画像のサイズを横に伸ばす方法はありますか？
画像のサイズを横に伸ばす方法はありますか？ 画像サイズの拡大、縮小などでサイズをまず縦を指定したら横もそれに合ったサイズになって指定できません。 リサイズではなくて無理やり横だけに伸ばす方法はありますでしょうか？
- ベストアンサー
- グラフィックソフト
- css背景のサイズをiPhoneで変えない方法
cssで背景画像を指定した際に、画像が大きいと、 iPhoneなどでは勝手に縮小されてしまいます。 この背景のサイズを勝手に変更させない方法はありませんでしょうか。
- ベストアンサー
- ブラウザ
- 複数の画像を全く同じサイズにしたい
IllustratorCS2、PhotoshopCS2（Windows版）初心者です。 IllustratorCS2上で、複数の画像を全く同じサイズに縮小するには どうすればよいのでしょうか。 画像の上で右クリックして変形→拡大・縮小のやり方は分かるのですが、その後デザインによって微妙にサイズ調整する必要が出てくるので毎回Shiftキーを押しながら1枚1枚目分量で全画像のサイズが合うようにしています。 何か良い方法があれば是非教えてください。
- 締切済み
- フリーウェア・フリーソフト
お礼
ありがとうございました！ とりあえず目的は達成できました。 まだまだ勉強が必要ですが… 本当に助かりました！ ありがとうございます。