带边框的全屏幕背景图片

我需要做什么（并且失败）是这样的网站：带边框的全屏幕背景图片

网站需要全屏，没有滚动。我不太满意的结果，因为：

- 当网页被打开的垂直帘（智能手机）在底边框太大

-I也试图让这个背景图像显示完全顶底部（我想面对顶部和底部全面看，而不仅仅是部分），但我真的不知道该怎么做。

我的CSS代码：

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>

：

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用这样的代码来解决但我仍然无法弄清楚如何使顶面和底面都可见。

来源

2015-10-16 engray

你能分享你的代码吗？ –

请发布您的jsfiddle。 – Alex

对不起，这里是我的代码：https://jsfiddle.net/24rcLmsj/ – engray

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>

来源

2015-10-16 12:12:42 imGaurav

他说：“我想面对顶部和底部全面看到，而不是部分”。您的代码在所有分辨率中不显示全脸 – Sylwek

谢谢，您部分解决了我的问题（带边框）。但正如@Sylwek所说，我仍然希望顶面和底面都完全可见。 – engray

检查最新的编辑是否可以帮助您 – imGaurav

所以，你只是想要全尺寸的图像与不同的屏幕尺寸不同的比例缩放？

在对图像的div试试你的CSS：

背景大小：含有;

如果这不是你所追求的，这里是一个指向你可以使用和测试的所有属性值的链接。

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

来源

2015-10-16 12:03:37 GClinton

添加以下CSS到HTML的身体

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

来源

2015-10-16 12:06:45

您的意思是somethink这样呢？

<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/

来源

2015-10-16 12:09:37 Sylwek

您可以使用下面的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; 
}

来源

2015-10-16 12:38:10

不，他不能，因为他说：“我希望能够全面地看到顶部和底部，而不仅仅是部分地看到” – Sylwek

带边框的全屏幕背景图片

回答

相关问题