整个页面谷歌地图背后的背景图像不会出现在html输出中

问题描述：

我有一个加载谷歌地图的html页面。我想用图片作为背景来覆盖整个html页面。但由于某些原因，背景图片不会显示，但Google地图会加载到指定的div中。我的文件如下（markerdrop.html）：整个页面谷歌地图背后的背景图像不会出现在html输出中

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Simple markers</title> 
    <link rel="stylesheet" type="text/css" href="markerdropstyle.css" />  
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
function initialize() { 
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
    var mapOptions = { 
    zoom: 4, 
    center: myLatlng 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'Hello World!' 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

和markerdroptsyle.css：

html{ 
    /* This image will be displayed fullscreen */ 
    background:url("images/myimage.jpg") no-repeat center center; 

    /* Ensure the html element always takes up the full height of the browser window */ 
    min-height:100%; 

    /* The Magic */ 
    background-size:cover; 
} 

    body{ 
     /* Workaround for some mobile browsers */ 
     background:url("images/myimage.jpg") no-repeat center center; 

     /* Ensure the html element always takes up the full height of the browser window */ 
     min-height:100%; 

     /* The Magic */ 
     background-size:cover; 
     min-height:100%; 
    } 

    #map-canvas { 
      height: 500px; 
      width: 500px; 
      }

我不确定你的最终结果应该是什么样子。也许添加你的项目的jsfiddle？ – 2014-10-31 14:10:12

感谢您的评论...尝试不同的事情后，我想出了它。 – 2014-10-31 14:27:17

答

好，

更改CSS为我工作过以下：

body { 
    background-image: url("images/myimage.jpg"); 
    background-size:cover; 
    } 

div#map-canvas 
    { 
    width:500px; 
    height:250px; 

    }

整个页面谷歌地图背后的背景图像不会出现在html输出中

相关推荐