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:

Code:
<header>
	<section>
		<h1>Auto World</h1>
		<h2>The Maddest Auto Community</h2>
	</section>
</header>
and is displayed
with this CCS code:

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 ?

.