- ベストアンサー
css背景のサイズをiPhoneで変えない方法
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
iphoneは、縮小すると言うより解像度が高いため表示サイズが小さくなること。また、ウィンドウを幅を越える場合は、縮めて表示させます。 そのブロック自体を、リキッドでiphoneの表示サイズに合わせるようにリキッドでデザインして、そのブロックの幅を基準にすればよいはずですが・・ どうしてもなら、mediaqueryで、背景画像を指定しているスタイルシートを変えてください。
関連するQ&A
- 背景画像をブラウザサイズに合わせる方法。
初心者です。 HPの背景画像を、閲覧者のブラウザサイズに合わせて拡大縮小させる方法を教えてください。 いろいろ調べてやってみたのですがうまくいきません…。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 外部CSSで背景画像を表示させる方法
外部CSSについての質問です。 ホームページを作成するにあたり、外部CSSを使用しているのですが、背景画像が表示されません。 普通の（固定なし）背景画像はきちんと表示されるのですが、「背景画像を固定する」タグだと表示されません。 ソースは間違っていないし、何度やっても表示されず、こちらで質問することにしました。 固定方法は、パーセントで指定する方法です。 どなたかご指導頂けないでしょうか？ よろしくお願い致します。
- ベストアンサー
- CSS
- 画面サイズに合わせて背景の写真サイズを変えたいです。※FLASHじゃありません。
はじめまして。 現在、HTMLやCSSを勉強中のものです。 以下のサイトはFLASHで作成されており、一定の小さな画面サイズまでは自動で背景の画像が縮小される仕組みになっています。 http://www.diesel.co.jp/site.html 私19インチを一つしか持っていないので、よくわからないのですが、逆に画面サイズが大きくなる分にはこれだとどこまでも拡大されるのでしょうか？ 今回、FLASHを使用しないで、背景に1枚絵の写真を使いホームページを作ろうかと考えています。 HTMLとCSSのみでこのような機能を持たせることは可能でしょうか？ もし可能だとして、HTMLとCSSのみでこのような機能を持たせることにデメリットなどはございますでしょうか？ どうかよろしくお願い申し上げます。
- ベストアンサー
- HTML
- CSSで「html」にも背景指定をするのはどのような場合？
CSSで「html」にも背景指定をするのはどのような場合？ CSSの背景指定に関する質問です。 ページ全体の背景色や背景画像を指定する場合、 自分は下記のように記述をしています。 body { background:url(画像名) repeat-x #背景色; } しかし、たまにhtmlにも背景を指定しているものを見かけます。 下記のような感じです。 html,body { background:url(画像名) repeat-x #背景色; } どういったケースでhtmlにも背景を指定する必要があるのでしょうか？ もしかしたらbodyのみに背景指定し、bodyにpadding等の指定を入れると、 何か不具合が起こる？と思い自分なりに実験してみましたが、 特に何も変化は無しでした。 (Firefox、IE6でチェック) 分かる方いらっしゃいましたら回答をお願いいたします。
- ベストアンサー
- CSS
- jQueryでCSSの背景画像を切り替えたい
見出しをクリック後にCSSで指定している背景画像を変えるため、jQueryでCSSを変更させてみたところ上手くいきません。 jQueryで指定する変更後の背景画像を絶対パスに換えたら上手くいったので、 パスの指定方法が悪いところまでは分かったのですが、相対パスでの指定方法がわからなくなりました。 WordPress環境で下記のコードを使用しています。 ご教授の程、よろしくお願い致します。 【 jQuery】 ○ディレクトリ ： テーマフォルダ/js/change.js jQuery(function() { jQuery("h3 div.class").hide(); jQuery("h3").click(function() { jQuery(this).next().slideToggle("fast"); jQuery(this).css("background-image" , "url('img/pic2.jpg')"); }); }); 【CSS】 ○ディレクトリ : テーマフォルダ/style.css h3 { background: #7c8187; background-image: url(img/pic.jpg); cursor: pointer; } 【画像】 ○ディレクトリ : テーマフォルダ/img/pic.jpg テーマフォルダ/img/pic2.jpg
- ベストアンサー
- CSS
- cssで、imgタグに、背景画像を敷きたい
cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 ＜HTML＞ <div id="hoge"> <img src～ ＜CSS＞ #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ？ width:？ height:？ margin:？ padding:？; ＜影の大きさ＞ ・width400px ・height200px ＜写真のサイズ指定＞ ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。
- ベストアンサー
- HTML
- ■iPhone/PC互換サイトの画像処理に関して
■iPhone/PC互換サイトの画像処理に関して 会社のHPをiPhoneとPC両方に対応するようCSSをiPhone用、PC用に分けて2つ作りました。 scriptでiPhone、PCどちらからの接続かによって使用するCSSを振り分けるかたちになっています。 そこで画像に関しては最初1つの画像を用意し、CSSによって画像サイズを変更するようにしたのですが、 iPhoneで確認したところ大きいサイズの設定(ここではPC向けに設定した画像サイズ)が優先され、 折角iPhone向けのCSSを用意しても、元の画像が大きいのでそれにあわせた表示となり、 意味がなくなってしまいました。 それから、画像データを直接imgで指定するのではなく、background-imageとして、 背景に指定することにしました。 この場合PC向けの大きな画像と、iPhone向けの小さい画像2つ用意し、 CSSによってどちらの画像を背景画像として設定するかを指定しました。 例） 【PC用】 h2 { background-image: url(images/subtitle_p.jpg); height: 53px; width: 700px; background-repeat: no-repeat; text-align: center; margin-right: auto; margin-left: auto; } 【iPhone用】 h2 { background-image: url(images/subtitle_i.jpg); background-repeat: no-repeat; height: 23px; width: 310px; text-align: center; margin-right: auto; margin-left: auto; } これは結果巧くいったのですが、h1とh2にこの動作を指定した後、 別の画像を同じように設定しようとしたところ、 iPhoneから見ると急にまた大きなサイズの画像が優先されるようになってしまいました。 CSSの書き方等は全く同じで、同じ画像を使用しても、大きなサイズの画像が表示されます。 原因が分からず困っています。 解決方法をご存知の方はご教示のほど宜しくお願いします。 また、画像を背景指定して使い分ける方法以外に、 もっと良い方法をご存知でしたらそちらも併せてお願いします。
- ベストアンサー
- HTML
- TABLEの背景画像をCSSに変更したい。
今までTABLEを使って背景画像を指定していたのですが、CSSに変更したいと考えています。 現在はTABLEで図１のようにABC A'B'C' A''B''...と連続する背景画像を＜図３＞のカラム「ロ」に入れています。 これをCSSのbackgroud-imageで指定すると図２のB'ように途中で切れてしまいます。 これを背景イメージＡ，Ｂ，Ｃのいずれかの境界で背景を終わらせるようにコントロールすることはできないものでしょうか。 CSSだけで指定するのは困難なように思います。 JAVA Scriptとの併用になるのでしょうか。 CSSは基本的な使い方は理解しているつもりですが、JAVA Scriptは読める程度で書くことはできません。 わかりにくい説明で申し訳ありませんがどなたか教えていただければ助かります。 よろしくお願いします。 なお背景画像の高さはA＝B＝Cです。 背景画像は＜図３＞のカラム「ロ」、カラム「イ」「ロ」はコンテンツしだいで下に伸びます。 ＜図１：背景イメージ＞ ■■■ ┐ ■■■ A ■■■ ┘ □□□ ┐ □□□ B □□□ ┘ ◆◆◆ ┐ ◆◆◆ C ◆◆◆ ┘ ＜図２：backgroud-imageによる指定＞ ■■■ ┐ ■■■ A ■■■ ┘ □□□ ┐ □□□ B □□□ ┘ ◆◆◆ ┐ ◆◆◆ C ◆◆◆ ┘ ■■■ ┐ ■■■ A' ■■■ ┘ □□□ ┐ □□□ B' ┘ ＜図３：現在のカラム（TABLEで指定）＞ ┌─────────┐ │┌─┐┌─┐┌─┐│ ││ ││ ││ ││ ││イ││ロ││ハ││ ││ ││ ││ ││ │└─┘└─┘└─┘│ └─────────┘
- ベストアンサー
- CSS
お礼
ありがとうございました。あの後mobilesafariにしぼって探しましたら、皆様、タグなどではなく画像を小さくする事で対処しているようでした。 ありがとうございました。