Image inside a div - dictating height

HTML & CSS
1

Hello,

I’m having headaches with a simple image inside a div.

I have a div which contains an image:

<div id="somediv">
<img src="someimg.jpg"/>
</div>

The div has a background color, and it wont show the background for the whole area of the image.

I want to make it so that div would have height of the image and the background applied to the whole surface.

See the attached screenshot for better understanding

What am I doing wrong?

I tried setting image attribute display: block; and adding clear: both; element after the img tag, but it wont help.

Thanks a lot for help.

2

The div should wrap around that image by default, so it’s likely you have some CSS applying that you haven’t told us about. My guess is that you’ve got a height set on the div, and perhaps you’ve floated the image?

3

Yup, I was going to say that it looks like the image is floated too…

4

Given there’s some height on the div, I’m putting my money on a fixed height. :smiley: