Trouble getting full page background image on windows phone emulator

Question

Background : I am trying to modify my existing web application for Windows Phone 7. My development environment is Microsoft Visual Studio 2010 premium and I've installed Windows Phone SDK 7.1. My web application contains HTML and CSS only. The web browser on the emulator is Internet Explorer Mobile 9.

Problem : I'm unable to get my web pages to display full screen (The width is fine but the height of my page is only around 80% of the display area and the remaining 20% is shown plain white.

For example, I tried to get a background image for my page and display it full page.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-control" content="no-cache" />
    <title>index</title>
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 500px)" href="mobile.css" />          
  </head>

  <body>
    <img src="background2.jpg" id="bbg" alt=""/>
  </body>

</html>

Following is the mobile.css:

#bbg {
  position:fixed; 
  top:0; 
  left:0; 

  /* Preserve aspet ratio */
  min-width:100%;
  min-height:100%;
}

Sample output

How could I correct this? Any ideas??

EDIT (The solution)
As Fabian mentioned in the accepted answer, here's what I had to add to my mark-up:

<meta name="Viewport" content= "height= device-height; user-scaleable=no; initial-scale=1.0" />

Also FYI I've had heaps of problems trying to get media-queries to work with Windows Phone in the past. See blogs.msdn.com/b/iemobile/archive/2010/12/08/… — Fabian Tamp

Fabian Tamp Fabian Tamp · Accepted Answer · 2013-01-14T06:53:19

Try setting your meta viewport tags up properly. These control the scaling of the page within the browser window.

If this still doesn't help, try setting your background image to the device resolution (800x480px) and see if that helps.

Trouble getting full page background image on windows phone emulator

2 Answers