html - 背景图片全屏

标签 html css image web

所以我正在尝试创建一个包含两个 div 元素的网页。在一个图像中。第二个是 background-color。但是有一个问题。图像没有到达屏幕边缘!我怎样才能做到这一点?我不想使用宽度的定义器,我希望它在所有内容上都能很好地缩放。

<head>
        <title>Derr</title>
        <style>
            body {
                font-family: "Courier New", Courier, monospace;
            }
            .fadein {
                background-image: url("img.bmp");
                height: 549px
            }
        </style>
    </head>
    <body>
        <div class="fadein">
            <br><br><br><br><br>
        </div>
    </body>

使用 Chrome。

最佳答案

你必须这样做

   body{
     margin:0px;
   } 
    
    .fadein{
    background-image: url(http://lorempixel.com/400/200);
    background-position: center;
    background-size: cover;
    height: 100vh;
    }
<body>
        <div class="fadein">
           
        </div>
    </body>

关于html - 背景图片全屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36608803/

相关文章:

css - 标签为 "input button"和 "a"的按钮不在同一行

html - 为什么使用 bootstrap 时无法在侧边栏中使用进度条?

arrays - 如何通过设置的按钮单击次数显示然后更改图像数组

objective-c - 检测图像 iOS 中的黑色像素

html - 返回 html 的 meteor 模板助手没有反应

javascript - 改变 IFrame src 内容

html - Mozilla 上的 CSS 动画问题

java - 将图像加载到 ImageView 中会导致 "I/Choreographer: Skipped 139 frames! The application may be doing too much work on its main thread."错误

html - 用链接包裹的图像上的同级选择器

javascript - 通过 WebSockets 将音频流式传输到 Web 音频播放器