Div Background Smaller Than Its Content With Css (without Specifying The Width In % Or Px)

This is what I have: This is what I want: I've tried borders, inset shadow, and many other options in CSS but none of them seem to work for my purpose. Is there any way to make t

Solution 1:

Adding another div will do 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>

Solution 2:

Something like this (fiddle)?

div {
    margin: 40px 0;
}

img {
    margin: -40px 0;
}

Solution 3:

I know this is old, but you can use background-size and position(if needed).

background-size: 50% 50%; /* background half the size of the div */
background-position: 50% 50%; /* to center it */