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指定不可)の相談です。

よろしくお願いします。

No.3 ベストアンサー 回答者： LOHA 回答日時： 2011/02/20 23:33

普通にpaddingとbackgroundでできると思いますが、こう言うことではないのかな？

<style>
img {
padding: 0 10px 10px 0;
background-image: url(http://gazo.okwave.jp/okwave/images/logo/logo.jp …
background-position: right bottom;
}
</style>
<img src="http://gazo.okwave.jp/okwave/images/logo/logo.jp …
＃画像やサイズは適宜変更してください。

No.2 回答者： metametamu 回答日時： 2011/02/20 17:48

ieの対応がちょっと難しそうなんですが、borderで余白を確保してみてはどうでしょう？

border-colorはtransparentにして透明にすることで背景画像を表示できるようにします。

img{
border:5px solid transparent;
background:url(/images/background_shodow.jpg) no-repeat 0 0 transparent;
}

ただ、これだけだとちょっとIEの7以下と互換モードあたりで背景が上手く表示されない可能性が高いです。
haslayout周りやdisplayあたりを触っていけば上手くいくかもしれません。

この回答へのお礼

回答ありがとうございました。

お礼日時：2011/03/02 00:39

No.1 回答者： SAYKA 回答日時： 2011/02/20 15:05

それはcss3のドロップシャドウかな？

http://www.google.com/search?hl=ja&q=css3%20%E3% …

そうでないなら divに影のbackgroundを敷いてその中にimgを左上配置すればできるよ
枠じゃなくてbackgroundね

この回答への補足

＞それはcss3のドロップシャドウかな？
書いてませんでしたが、CSS2です。背景影画像は、こちらで用意します。

＞divに影のbackgroundを敷いて
諸事情により、divが触れないため、imgタグで処理する方法はないでしょうか？
ムリっぽいとは思ってるのですが、
paddingとか、マイナス値処理とかして無理矢理にでも、ゴリ押しする方法を、
もしご存知の方がいれば、教えてください。

補足日時：2011/02/20 15:22