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 · ベストアンサー

普通にpaddingとbackgroundでできると思いますが、こう言うことではないのかな？
<style>
img {
padding: 0 10px 10px 0;
background-image: url(http://gazo.okwave.jp/okwave/images/logo/logo.jpg);
background-position: right bottom;
}
</style>
<img src="http://gazo.okwave.jp/okwave/images/logo/logo.jpg">
＃画像やサイズは適宜変更してください。

回答No.2

metametamu

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あたりを触っていけば上手くいくかもしれません。

お礼

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

回答No.1

SAYKA

それはcss3のドロップシャドウかな？
http://www.google.com/search?hl=ja&q=css3%20%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%82%B7%E3%83%A3%E3%83%89%E3%82%A6

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

補足

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

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