CSS @media screen

The following code defines maximum width of the browser and set an image file to the background. The image file is set to fit the size of browser. Therefore, the background image always fit in the browser size.
http://stackoverflow.com/questions/4189868/what-does-media-screen-and-max-width-1024px-mean-in-css
http://www.w3schools.com/css/css_mediatypes.asp
-----------------------------------------------------------------------------
<html>
<head>  
<title>Max width test</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head> 
<body>
    <img class="bg" src="images/wallpaper.jpg" alt="" />      
</body> 
</html>
-----------------------------------------------------------------------------
img.bg{
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;;
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px;){
  img.bg{
    left: 50%;
    margin-left: -512px;
  }
}
-----------------------------------------------------------------------------