Image Display Problem ( expanding ! )

HTML & CSS
1

Hi,

My page contains a header image

I displayed the image a second time with normal <img> tag.
So the only two images are in fact the same image.

The top one, in the header, should be looking like the
one below - not sure why it is sort of zoomed in looking ??

You ca see it here: My Site

I am using this HTML:

<header>
	<section>
		<h1>Auto World</h1>
		<h2>The Maddest Auto Community</h2>
	</section>
</header>

and is displayed
with this CCS code:


header, footer {
	display:block;
	width:1060px;
	margin:0 auto;
	}

header {
	height:200px;
	background: blue;
	border-radius:0px 0px 12px 12px;
	-moz-border-radius:0px 0px 12px 12px;
	-webkit-border-radius:0px 0px 12px 12px;
	}
	
header section {
	display:block;
	width:1000px;
	height:150px;
	background: url(http://professional-world.com/images/trees.jpg ) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	opacity:0.8;
	-moz-opacity:0.8;
	-webkit-opacity:0.8;
	padding:20px;
	margin:0 0;
	margin-left:10px;
	border-radius:0px 0px 12px 12px;
	-moz-border-radius:0px 0px 12px 12px;
	-webkit-border-radius:0px 0px 12px 12px;
}

Can anyone see what I have got wrong ?

.

2

The problem is the whole “background-size: cover;” malarkey, which (if I’ve understood it right) makes the background image big enough to cover the whole page, in other words it scales the 150px high picture up to the height of the page, with the width scaling by the same proportions. You can see this happening … if you change the height of the window the image grows and shrinks, but if you change the width of the window the image stays at the same scale.

3

So an alternative out be something like:

background-image: url(http://professional-world.com/images/head_image.jpg);
background-repeat: no-repeat;
background-size: 1040px 170px;
-webkit-background-size: 1040px 170px;
4

The problem is the whole “background-size: cover;”

more specifically, it is the COMBINATION of background-size: cover; and position:fixed; getting rid of position fixed will solve your scaling issues.