width: 100%; height: 100%;的问题

在CSS中，如果我把.content的宽度设置为100%，即如下代码所示，

.content
{
width: 100%;
height: 4040px;
background: url("../images/mooc.png") center no-repeat;
}

则背景图片显示不完整，浏览器窗口没有水平滚动条。

如果我把.content的宽度设置为1920px，背景图片才显示完整，并且浏览器窗口有水平滚动条。

.content
{
width: 100%;
height: 4040px;
background: url("../images/mooc.png") center no-repeat;
}

这是为什么呢？我使用的显示器分辨率是1920×1080。

我使用的图片mooc.jpg，大小是1900×4040（经过自己的修改）。

附完整代码如下。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
   <head>
      <title>4-1-示例</title>
      <meta charset="UTF-8">
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }
 
            html,
            body
            {
                width: 100%;
                height: 100%;
            }
 
            .content
            {
                /*width: 100%;*/
                width: 1920px;
                height: 4040px;
                background: url("../images/mooc.png") center no-repeat;
            }
 
            .opacity
            {
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-image: url("../images/opacity.png");
            }
 
            .login
            {
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                width: 360px;
                height: 360px;
                background: url("../images/login.png") no-repeat;
            }
        </style>
   </head>
 
   <body>
      <div class="content"></div>
      <div class="opacity"></div>
      <div class="login"></div>
   </body>
 
</html>