Media query not triggering

I'm trying to use media queries to change background image and hide content in a division tag if the screen goes beyond 640px. This doesn't seem to work. I'm new to this and feel I'm missing something major.

    <html>
   <HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}
-->
</style>
</HEAD>
<body>
@media screen and (min-width:641px) {
body {background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');}
div.desktop {visibility:hidden;}
}
<div class="desktop" style="position:absolute;top:0px;left:0px; z-index:1">
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile1.jpg" width="100%" height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile2.jpg"  width=100% height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile3.jpg"  width=100% height=auto>
</div> 
</body>
</html>

Solution

The CSS isn't working because its not contained with-in style tags.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}


-->

@media (min-width:641px) {
    body {
        background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');}
        div.desktop {visibility:hidden;
    }
}
</style>

</head>
<body>

<div class="desktop" style="position:absolute;top:0px;left:0px; z-index:1">
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile1.jpg" width="100%" height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile2.jpg"  width=100% height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile3.jpg"  width=100% height=auto>
</div> 
</body>
</html>