Image Display Problem ( expanding !! )

[jeddi]

Hi,

My page contains a header image 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;
}

And this HTML:

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

The header image is an avenue and I have displayed it with
the regulat <img> tag on my page as well.

My Page


Full coding can be seen there as well.


The image seems to be getting "zoomed in"
Can anyone see what I have got wrong ?



Thanks

[jerry62704]

Which image? Auto World, Family Fitness or the trail?

Family Fitness looks distorted to me, is that the way you wanted it to look?

[jeddi]

Sorry is I wasn't clear.

It is not the banner images.

It is the one in the header section
which is http://professional-world.com/images/trees.jpg

In the header section is should display as a background image


I displayed it again towards the bottom of the page
using normal <img> tag. This is show what it should be
looking like in the header section.

The version of the image in the header section appears to be "zoomed in"
and only showing some of the actual image.


Hope someone can see what the problem is


.

[jeddi]

I have taken the other images off the page now.

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 ??


My Page




.

[abduraooft]

What's the purpose of

-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

in your CSS ?

[jeddi]

Hi,

Thanks for looking.

I think that code stretches the image to fit the
width and height dimensions that you give the
block , in this case width:1000px; height:150px;

So if an image is only 800px wide it will get resived to "cover"
the area.

Of course I might be using it incorrectly


.

[jeddi]

Hi

- I am still having problem with this

I took out this css:

background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

- BUT leaving in the image code line:

background: url(http://professional-world.com/images/body_bk_image.jpg) no-repeat center center fixed;

But the image just did not show up at all

So I put it back in again !


I must have one of the settings wrong as the imaged is being stretched for some reason,
probably it is something to do with the cover element , or maybe it
is the center center fixed; part of the ccs code

This is where you can see the problem:

My site


Any ideas ?


.