html - div background smaller than its content with css (without specifying the width in % or px) -


this have:

<div style="width: 100%; background: red; text-align: center">   <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/plain-m%26ms-pile.jpg/280px-plain-m%26ms-pile.jpg" height="170" width="170" style="border-radius:700px; border: 10px solid white;"> </div> 

though want: http://i.stack.imgur.com/fstkg.png

i've tried borders, inset shadow, , many other options in css none of them seems work purpose :( there way make div's background smaller contents without having specify height?

adding div it;

<div style="width: 100%; text-align: center">   <div style="width:100%;height:100px;position:absolute;left:0;top:45px;background:red;z-index:-1;"></div>   <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/plain-m%26ms-pile.jpg/280px-plain-m%26ms-pile.jpg" height="170" width="170" style="border-radius:700px; border: 10px solid white;"> </div> 

Comments

Popular posts from this blog

javascript - DIV "hiding" when changing dropdown value -

Does Firefox offer AppleScript support to get URL of windows? -

android - How to install packaged app on Firefox for mobile? -