- ベストアンサー
背景画像
cssで背景画像を指定する際、サイズなどの指定はできないのでしょうか？ 例えば、縦100pxの画像を縦80pxに縮小して表示のような事はできるのでしょうか？ ご教授ください。よろしくお願いします。
- 織田 信長（@id_system）
- お礼率29% (61/205)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
背景画像はIMGタグのように埋め込んでいると言うよりもただパズルのように貼り付けているような感じです。 大きさの指定は出来ません。IEでZoomを使った解決が出来たとしてもそれ以外の環境での解決方法がないです。 仮に今後新しい手法が生まれたとしても未対応環境はそのまま取り残されることになります。 しかし、リピート表示や座標指定など通常の画像埋め込みとは違う表現方法が出来ますからそれを上手く活用するパターンが多いと感じます。 大きさ指定に執着せず広い視点で考えたほうがいい案を思いつくんじゃないでしょうか？
その他の回答 (1)
- is_may
- ベストアンサー率65% (58/89)
こんな感じでどうでしょう？ <html> <head> <style type="text/css"> <!-- .dummy { position:absolute; top:0px; left:0px; width:expression(document.body.clientWidth*2); height:expression(document.body.clientHeight*2); z-index:1; background-image:url("http://***/back.gif"); zoom:50%; } .main { position:absolute; top:0px; left:0px; z-index:2; } --> </style> </head> <body> <div class="dummy"></div> <div class="main"> ページの内容 </div> </body> </html> CSSの.dummy内にある width:expression(document.body.clientWidth*2); height:expression(document.body.clientHeight*2); の「*2」は縮小率に応じて変更してください。今回は50%縮小なので、 50×2=100 にしています。別にぴったり100にならなくても結構ですので、80%縮小の場合は width:expression(document.body.clientWidth*1.5); height:expression(document.body.clientHeight*1.5); こんな感じです。
