Position of the background image, center does not work

advertisements

I'm trying to create a page with a centered background image and using the position center center. But instead of appearing centered both vertically and horizontally the image appears to extend vertically beyond the top of the page. Where/why am I going wrong?

<!DOCTYPE html>
<html>
<style>
body
{
background-image:url('tumbleweed.jpg');
background-repeat:no-repeat;
background-position:center center;
background-color:#EAEAEA;
}
</style>
</html>


You can use cover

background-image:url('tumbleweed.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

http://jsfiddle.net/ou10gmfd/