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

Question

This is what I 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>

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 the div's background smaller than the contents WITHOUT having to specify its height?

http://jsfiddle.net/tLd9T/ – user77850 Jul 24 '13 at 01:04 — user77850, Jul 24 '13 at 01:04
http://jsfiddle.net/tLd9T/8/ – Tofandel Nov 28 '18 at 12:28 — Tofandel, Nov 28 '18 at 12:28
You just need to add negative margins to the image – Tofandel Nov 28 '18 at 12:29 — Tofandel, Nov 28 '18 at 12:29

score 1 · Answer 1 · answered Jul 24 '13 at 01:14

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>

score 1 · Answer 2 · answered Jul 24 '13 at 01:23

1

Something like this (fiddle)?

div {
    margin: 40px 0;
}

img {
    margin: -40px 0;
}

answered Jul 24 '13 at 01:23

Ilya Streltsyn

13,076
2
37
57

score 1 · Answer 3 · answered Apr 25 '17 at 14:55

1

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 */

answered Apr 25 '17 at 14:55

Wayne F. Kaskie

3,257
5
33
43

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

3 Answers3

Linked