Images in CSS

Einsteins theory. Doing the same thing over and over and expecting a different result. Well that's where I am at with this image stuff.

I'm doing some playing around on my own. What I thought I was trying to accomplish was put a basic image in a header in the middle of the header, with text to the left and some icons to the right. so far its working.

Here is what I coded so far.

<div class="img"></div>

.img { background-image: url('img/img.jpg'); display:inline-block; width:100%; height:auto; background-repeat:no-repeat; background-size:contain; border:1px solid black; (put the border on to see what the div would do when resized in the browser.)

What is happening is the image shows up in the middle. When I resize the browser, the image resizes as does the border. Except the border height of the div stays at 100px.

How do I make it so the div resizes with the image? I'm assuming when applying this in a real world application that the div not resizing because its set for 100px would or could mess up a layout for a website.

I have tried changing the height of the div to 100%. But then the image does not show up. It just shows like a pixel. Where I am going wrong in assuming the div would resize and the image not showing up.

Thanks, great site. Learned a lot so far. Lots of knowledgeable people here.

Thanks again for replies.