Resizing Image in CSS

[sirlink99]

I have this code which should resize the image in the header.

#headerWrap {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	width: 90%; 
	height: 7%;
	background: url('Images/header.gif') no-repeat;
}
img.image {
	width: 100%;
	height: 7%;
}

and this is the html code to go with it

<div id="headerWrap" align="center"><img src="Images/header.gif" class="image"></img></div>

I have tried changing

img.image to #headerWrap img

but that did not make a difference. How could I fix this code to resize the image?

Thanks for the help.

[Arkinder]

Could you be a little more specific please. It's the height that isn't resizing, right? The annoying thing about the height property is that you need to have it set somewhere with a non-percent unit before it will work with percentages ideally.

Regards
Arkinder

[Lorel]

Resizing an image with CSS does not reduce the size of the image when loaded on the page - only the viewable display of the image. So you don't want to do that with very many images or it can increase download time - a new ranking factor.

[sirlink99]

It is the height that isn't resizing. I can make a smaller picture. If I make a smaller picture can I make that picture larger to fill the header without any problems?

[Arkinder]

Lorel simply meant that using this technique on multiple images could cause a problem because it does not change the file size (kb, mb) of the image.

Give a height to your body element. That way you're telling the browser 90% of that height.

body { width: 100%; height: #em;}

Just use whatever height you like.

Regards
Arkinder