响应式背景图像 - 全屏答案

【问题标题】：Responsive Background Image - Fullscreen响应式背景图像 - 全屏
【发布时间】：2015-10-16 00:30:33
【问题描述】：

我正在制作一个简单的登录页面，并试图让以下图像成为背景全屏：image

我的 CSS 当前如下所示：

body {
    background-image: url('/images/bg.jpeg');
    width: 100%;
    height: 100%;
    position: fixed;
}

大部分图像都被截断了，最好的补救方法是什么？

谢谢！

【问题讨论】：

background-size: cover?另请注意，所有不同设备上的图像永远不会有理想的比例（例如屏幕尺寸）。因此，在很多情况下，您可能会丢失一些图像。诀窍是集中图像的内容。

标签： css image twitter-bootstrap responsive-design

【解决方案1】：

你试过了吗：

body {
  margin:0;
  padding:0;
  background: url('/images/bg.jpeg') no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

【讨论】：

【解决方案2】：

这是一个很酷的着陆页创意。背景，被固定是登陆页面的一种流行的很酷的方式。请在点击运行代码sn-p后点击右上角的“整页”。

@import url(https://fonts.googleapis.com/css?family=Lato:300);

div:nth-child(1){
  background-image: url(https://images.unsplash.com/photo-1431538510849-b719825bf08b?q=80&fm=jpg&s=6fd7a983e3b43e66d2b6062856b9df66);
  height: 750px;
  width: 100%;
  background-size: cover;
  background-attachment: fixed;
  
}

div:nth-child(2){
  height:400px;
  width: 100%;
  background-color: black;
  z-index: 1;
}

h1{
  text-align: center;
  color: white;
  background-attachment: fixed;
  font-family: 'Lato', sans-serif;
  padding-top: 300px;
  z-index: 0;
  text-shadow: 0 0 2px black;
  font-size: 50px;
  }

<div>
  <h1> Michael Barreiro </h1>
</div>

<div></div>

【讨论】：