0

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.

3
Contributors
4
Replies
8
Views
6 Years
Discussion Span
Last Post by Arkinder
0

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

0

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.

0

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?

Edited by sirlink99: n/a

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.