- 締切済み
背景画像の動的拡縮
要素の背景に指定した画像の拡縮について質問させてください。 div { background-image: url("ohana.png"); } の様にする事でdiv要素の背景画像を指定できますが、 div要素のサイズが不定(内容やクライアントの設定によって変動)である場合、 画像が途中で切れたり繰り返し表示されたりせずに、 要素に合わせて適切なサイズに拡縮して表示させたいと考えています。 これを実現する場合、どのように指定すればよろしいでしょうか？ IEのみの独自仕様を利用した実装は回避し、 IE6～とFF3.6～で実現できればと考えています。 宜しくお願い致します。
- mamadorusu
- お礼率31% (5/16)
- CSS
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- k0021
- ベストアンサー率26% (32/120)
困っているわいには、回答に対して問い合わせないですね。 No3さんの回答であっていると思いますが。 私なら以下のようにしますが <body> <div style="position:absolute;top:0;left:0;width:100%;"> <img src="r014p.jpg" style="width:100%;" alt=""></div> <div style="position:absolute;top:0em;left:0;width:100%;"><div style="padding-left:2em;padding-right:1em;"> 以下通常の記述内容。 </div></div> padding-left:2em;padding-right:1emは、bodyで空白を指定しても反映しないための対策。
- 参考URL：
- http://ryuso.info/r/r001.htm
- ORUKA1951
- ベストアンサー率45% (5062/11036)
この課題、具体的内容がわからないとピンポイントの回答は出来ないのです。 特に ★div要素のサイズが不定(内容やクライアントの設定によって変動)である場合、 ですが、もし内容の縦横比が変わったらどうするのかがわかりません。示されたohana.pngが、私の想像通り鼻の写真なら、アスペクト比が変わったら困ります。そのような場合、 ・はみ出した内容をスクロールバーで表示させる CSS3のoverflow-yプロパティを使うのでIE6非対応 よって、「要素に合わせて適切なサイズ」は、矛盾した希望であると思います。 まあ、現状シェア３%以下のIE6は、もう切れ捨てても良いのじゃないかと・・ Internet Explorer 6 Countdown | Death to IE 6 | IE6 Countdown ( http://www.ie6countdown.com/ )・・・Microsoft自身が、IE6のシェアを1%以下にするために開設した特設サイト!!(Microsoft(豪)自身が「腐った牛乳( http://www.itmedia.co.jp/news/articles/1005/17/news033.html )と表現している。 それに協力する意味もこめて・・ 文字が、要素をはみ出さない限りIE6以降に対応した、ウィンドウ巾に合わせて画像を伸縮させるHTMLの見本です。(さらに、IE5も、センター寄席にこだわらなければ問題ない) [HTML4.01strict+CSS2.1] ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み ※タブは、＿に置換してあります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.header div.nav{ ＿width:45%;margin:0 auto; ＿min-width:400px;max-width:600px; ＿position:relative; ＿padding:0; } div.header div.nav p.backImage{ ＿margin:0;padding:0; ＿position:relative; ＿top:0;left:0; ＿width:100%; } div.header div.nav p img{ ＿display:block; ＿width:100%;height:auto; } div.header div.nav ol{ ＿position:absolute; ＿top:0;left:0; ＿width:90%; ＿height:90%; ＿overflow:auto; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<div class="nav"> ＿＿＿<p class="backImage"><img src="./images/ohana.png" width="480" height="360" alt=""></p> ＿＿＿<ol> ＿＿＿＿<li><a href="./">Top</a></li> ＿＿＿＿<li><a href="./Product">Product</a></li> ＿＿＿＿<li><a href="./Books">Books</a></li> ＿＿＿＿<li><a href="./Contact">Contact</a></li> ＿＿＿＿<li><a href="./">Top</a></li> ＿＿＿＿<li><a href="./Product">Product</a></li> ＿＿＿＿<li><a href="./Books">Books</a></li> ＿＿＿＿<li><a href="./Contact">Contact</a></li> ＿＿＿＿<li><a href="./">Top</a></li> ＿＿＿＿<li><a href="./Product">Product</a></li> ＿＿＿＿<li><a href="./Books">Books</a></li> ＿＿＿＿<li><a href="./Contact">Contact</a></li> ＿＿＿＿<li><a href="./">Top</a></li> ＿＿＿＿<li><a href="./Product">Product</a></li> ＿＿＿＿<li><a href="./Books">Books</a></li> ＿＿＿＿<li><a href="./Contact">Contact</a></li> ＿＿＿＿<li><a href="./">Top</a></li> ＿＿＿＿<li><a href="./Product">Product</a></li> ＿＿＿＿<li><a href="./Books">Books</a></li> ＿＿＿＿<li><a href="./Contact">Contact</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> </body> </html>
- JaneDue
- ベストアンサー率75% (263/350)
CSS3 なら簡単ですが、ご指定のブラウザだとCSSだけでは無理。 実現するにはJavaScriptが必要です。画像の上にレイヤーを重ねる要領でコンテンツを配置し、ページ読み込み時およびリサイズ時に画像サイズを変更することで可能ではありますが…。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
背景は、あくまで背景で内容とは関係ないものですから、それの拡大縮小はできません。 それが必要だと言うことは、画像としてマークアップすべきですし、あるいはそれで不都合になる画像を背景に使用すべきではありません。印刷すると当然印刷されません。 画像を表示し、その上に文字なりを描画することになります。 <div class="nav"> <p><img src="./" width="" height="" alt=""></p> <ol> <li><a href=""></a></li> ・・・・・ と言う風に・・ 画像(置換インライン要素)を、ブロックにして、サイズを外部から取得させることになります。 div.nav{width:80%;min-width:480px;max-width:600px;margin:0 auto;position:relative;} div.nav p img{display:block;position:absolute;margin:0;padding:0;top:0;left:0;width:100%;height:100%;} ・・・とか・ その場合も、親コンテナブロックの縦サイズは、ユーザー依存ですから合わせることはできません。もちろん、サイズを固定してしまうと所期の目的である、「ウィンドウ巾に依存しない」を失うことになります。
関連するQ&A
- 背景画像の指定方法
少し調べたのですが、さっぱり原因が分からない為質問させていただきます。 外部CSSで背景画像を指定しているのですが、WinXP IE7で作製した所うまくいったのですが、別のマシン（WinXP IE6）で見ると表示の仕方が変わってきます。 参考ソース▼ 【外部CSS】----- .bg { width:300px; background-image:url(bg.png); background-repeat:no-repeat; background-attachment:fixed; background-position: bottom;} 【HTML】----- <div class="bg">長い本文</div> IE7だと、開いているウィンドウサイズに合わせて、見ている画面範囲の下部に背景画像が来るのですが、IE6の方だと、長い本文をスクロールしていった最後に、背景画像が表示される状態です。 分かりにくい説明かもしれませんが、アドバイスよろしくお願い致します。
- 締切済み
- HTML
- 背景画像を二つ指定
こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか？ 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }
- ベストアンサー
- HTML
- 【jquery】スクロールで背景画像もついてくる
よろしくお願いいたします。 jqueryを使って背景画像をスクロールと一緒についてくるようにしたいのですが、 思い通りにいかず、質問させていただきたいと思います。 やりたいと思っていることは、 まず背景画像1（1.jpg）をbodyにbackgroundに設定して、 その上に<div></div>タグで背景画像2（2.png：透過画像）をbackgroundに設定し、 背景画像2だけスクロールと一緒についてくるようにしたいと思っています。 現状のソースは以下になっています。 【html head内】 <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#haikei').css('background-position', '50%'+ parseInt( y / 3 ) + 'px'); }); }); </script> 【html body内】 <div id="haikei"> <div id="wrapper"> <div id="header"> ～略～ </div> <div id="contents"> ～略～ </div> </div> </div> 【CSS内】 #bg01 { background: url(2.png) top center repeat-y; } 今の状態だと、動き自体は思い通りに動いてくれるのですが、 背景画像を表示させたい位置がありまして、 <div id="header"></div>内には2.pngを表示させず、 <div id="contents"></div>の部分から2.pngを表示させて スクロールについてくるようにしたいと思っています。 下記のように、 <div id="wrapper"> <div id="header"> ～略～ </div> <div id="haikei"> <div id="contents"> ～略～ </div> </div> </div> と、<div id="haikei"></div>の位置を変えてみましたが、 これだとスクロールしたときに、<div id="header"></div>の下から 画像が途中からはみ出てくる？ような感じで、きれいにスクロールされません。 さらにCSSのrepeat-yをno-repeatに変えて試してみましたが、 その場合画像がページの一番下まで動いてくれません。 （途中までしか画像がついてきてくれない感じです） 方法としては、2.pngの表示開始位置を<div id="header"></div>より下に位置指定すれば うまくいくのかなと思ったのですが、書き方がわからず。。。 なにかうまくいく書き方はないでしょうか・・？ もしくは上記の方法以外でも、実現できそうなやり方や、 参考になりそうなサイトがあればお教えいただきたいと思っています。 ちなみに、私が参考にさせていただいたサイト様はこちらです。 http://www.webopixel.net/javascript/350.html わかりにくい点がありましたら、補足いたします。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- ie10で背景に指定した画像が滲む
ウェブサイト用のカンプを作成して1枚のjpg（png）で保存し、cssで背景にno-repeatで設置して表示確認をおこないました。下記のようなコードです。 ～ <!--表示例（1）--><div style="background:url(該当画像名.jpg) no-repeat"></div> <!--表示例（2）--><div><img src="該当画像名.jpg" alt="" /></div> ～ 上記で同じ画像を背景で配置した場合と、imgタグで設置した場合に、 ieのみ、背景に設置した画像が滲むような表示になってしまい、クリアに表示する方法がないか教えていただけないでしょうか。 win7のIE10、Firefox30、chrome35の環境で表示確認をおこないました。 IE以外での表示は問題ありませんでした。 また、拡大率等は100％です。 よろしくお願いいたします。
- 締切済み
- CSS
- 背景画像だけをはみ出して表示させたい。
CSSについて質問です。 よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい！！</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。
- ベストアンサー
- HTML
- スクロールに沿ってjavascriptで背景画像を
現在webサイトを作成しています。ページのメインビジュアルを「.mainVisual」というclassを作成し背景画像を指定して表示しています。 この背景画像を画面スクロールした際に、下に動くように以下のjavascriptを実装しています。 $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('.mainVisual').css('background-position-y', '0 ' + parseInt( +y / 10 ) + 'px'); }); }); この状態で動くのですが、今回新たに背景画像の元々の表示位置を「background-position」で調整したいと考えています。（単純に画像が下に下がるので、事前に画像の位置を上に上げておきたい） cssの記載で位置の調整はできるのですが、スクロールしてjavascriptが実装されると「background-position」の値が0pxになってしまい、背景画像の指定位置が元に戻ってしまいます。 こちら既に指定指定した「background-position」の値を残しつつ、jsでスクロールに併せて要素を動かすにはどのようにすればよいでしょうか。 わかりにく説明と、ひどく初心者の質問で大変に恐縮ですが、どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。
- 締切済み
- JavaScript
- テーブルの背景画像のみ透明化
http://css-happylife.com/archives/2007/0106_1500.php 上記サイトのように、背景画像のみを透過させたいと考えています。 例えば、 body{ background-image : url(./background.png); } table{ filter:Alpha(opacity=70,finishOpacity=70,style=3); } とした場合は、テーブル内の全てのコンテンツが透過されてしまいます。 透過されているテーブルの上に透過されていないテーブルを重ねて表示させる方法もネット上に掲載されていましたが、その場合、上記サイトのように動的にテーブルサイズが変わる場合は、実装が難しいように感じます。 しかし上記サイトでは背景のみが透過されているようです。 スタイルシートを見てみましたが、自分の知識では解析できませんでした。 実現方法を教えていただけると大変助かります。
- ベストアンサー
- HTML
- div入れ子の背景画像
【CSS】 #layout{ width:755px; margin:auto; background-color:#ffff00; background-image:url(img/back.gif); background-repeat:repeat-y;} #menu{ width:168px; margin:0px; padding:0px; float:left;} #main{ width:570px; background-color:#ffffff; padding:0px 0px 0px 10px; float:left;} 【html】 <div id="layout"> <div id="menu">メニュー</div> <div id="main">メイン</div> </div> レイアウトで指定した背景画像を縦に繰り返し表示させたいのですが、 上記のCSSだとIEはOKなのですが、foxが表示されません。 メニューidにはデザイン上背景画像は設定できません。 また、 <div id="layout"> あああ </div> を試したら背景画像が表示されましたので、パスの間違いはありません。 どうすれば良いでしょうか？ 知恵をお貸しいただけますでしょうか。 宜しくお願い致します。
- ベストアンサー
- HTML
