带边框的全屏背景图片

Question

我需要（但未能）做的是如下图所示的网站：

网站需要全屏且无滚动。我对结果不满意，因为：

-在竖屏（智能手机）上打开网站时底部边框太大

-我也试图让这张背景图片的顶部和底部完全显示（我希望顶部和底部的面孔可以完整看到，而不仅仅是部分），但我真的不知道该怎么做它。

我的CSS代码：

html
{

    background: #f36d32;
    width: 98%;
    height: 95.9%;
    padding: 1%;

}

    body
    {
    background: url(http://web-industry.eu/landing/img/bg.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    }

好的，边框问题被@imGaurav用这样一段代码解决了：

body {
  background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  border: #f36d32 3px solid;
  padding: 0;
  margin: 0;
}

<body></body>

但我还是想不出如何让顶面和底面都可见。

Answer 1

所以您只想让全尺寸图像根据不同的屏幕尺寸进行缩放？

在你的css图片上div试试：

背景大小：包含；

如果这不是您想要的，这里有一个 link 到您可以使用和测试的所有属性值。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

将下面 CSS 添加到您的 HTML 正文

position: absolute;left: 0;top: 0;

Answer 3

你的意思是这样的吗？

<div class="vertical-container">
    <div class="vertical-middle">
        <img src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png">
    </div>
</div>


html,body {
    height: 100%;    
}

img {
    max-width: 100%;
    max-height: 100%;
}

.vertical-container {
    background-color: green;
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}
.vertical-middle {
    height: 100%;
    vertical-align: middle;
    display: table-cell;
}

https://jsfiddle.net/org72bfb/1/

Answer 4

body {
  background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  border: #f36d32 3px solid;
  padding: 0;
  margin: 0;
}

<body></body>

Answer 5

您可以使用以下css来解决问题。参考CSS-trick

html { 
  background: url(http://i.stack.imgur.com/zRKcX.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

带边框的全屏背景图片

Full screen background image with border

html

css

fullscreen