如何使背景图像响应答案

【问题标题】：How to make a background image responsive如何使背景图像响应
【发布时间】：2016-12-16 17:36:32
【问题描述】：

我刚刚使用 css 创建了一个带有背景图片的简单即将推出的页面：

body{
   background-image: url(FreeVector-Fresh-Beer.jpg);
   background-repeat: no-repeat;
   background-size: cover;  
}

这里是html：

<figure>
        <img class="img-responsive" src="Craft-Beer-SA-min.png" alt="Chania">
</figure>
<div class="paragraph" style="font-size:50px">
    <p>Our Website Is Brewing ! ! ! </p>
    <p>Coming To A Browser Near You. . .<br><a href="">info@craftbeersa.co.uk</a></p>           
</div>

我怎样才能使这个背景图像响应？

【问题讨论】：

在什么情况下响应？是在不同屏幕上查看图像还是应用动画？
当您在 Google 上搜索时：reposnsive background image full screen 您会得到 this。提问前请先搜索。
尝试 google 或您选择的搜索引擎。 StackOverflow 搜索也应该这样做
Full-screen responsive background image的可能重复
@Elton Sousa : 试试 background-size:100% 100vh;

标签： html css

【解决方案1】：

试试这个

background-size:100% auto;

【讨论】：

对不起，我忘了提及我之前尝试过的内容。背景大小：100% 仅适用于宽度。
所以图像高度是你的问题？
是的。显然 background-size:100% 对宽度更好。只是身高。我可以看到这不是100％。图像的一部分被隐藏了，我只在中等屏幕上看到它。那么在小屏幕中，图像高度不会覆盖整个屏幕。
你必须使用媒体查询@media only screen and (max-width:767px) ...这个是用于移动屏幕的...使用以像素为单位的高度值..例如..height:300px; ..它不起作用表示使用max-height...

【解决方案2】：

body{    
    background: #222 url('FreeVector-Fresh-Beer.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
}

试试上面的代码。

【讨论】：

它适用于高度。但我看到在小屏幕上它隐藏了图像内容的宽度。
@EltonSousa 它发生在即将推出的页面中，您可以参考自己 webthemez.com/demo/coming-soon-responsive-web-template-trendset 和 bootstraptaste.com/demo/themes/WeBuild

【解决方案3】：

您可以直接将背景应用到html 元素并使用background-size: cover 确保它覆盖整个区域，不留空隙。

html { 
  background: #222 url('FreeVector-Fresh-Beer.jpg') no-repeat center center fixed; 
  background-size: cover;
}

否则，您可以确保在 body 标签上声明 height: 100%，这样 body 也会占据浏览器的整个高度，并在此处应用背景。

body { 
  background: #222 url('FreeVector-Fresh-Beer.jpg') no-repeat center center fixed; 
  background-size: cover;
  height: 100%;
}

Background-size: cover 保证在不扩大或拉伸图像的情况下覆盖整个图像；自然，这意味着您的图像的某些部分将被隐藏。但是，如果您想简单地扩展它，即拉伸它以占据整个区域，您可以使用background-size: 100% 100%。

一般来说，您想使用cover，并且您可以通过background-position（即中心，中心）在我在速记属性中的答案中决定哪些区域仍然可见（因此您总是会看到中心，垂直和水平) 但它可能是：

水平：左 |对 |居中
垂直：顶部 |底部 |居中

【讨论】：

。它适用于高度。但我看到在小屏幕上它隐藏了图像内容的宽度。
我已经更新了我的答案。自然，如果您不拉伸它，您的图像将需要被裁剪，这意味着某些区域将不再可见。您可以通过背景位置值来控制它。

【解决方案4】：

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CraftBeerSa</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="text">
        <img src="Craft-Beer-SA-min.png" alt="">
        <div class="info">
            <p>WEBSITE COMING SOON</p>
        </div>
    </div>
</body>
</html>

CSS：

body{
    background-image: url(FreeVector-Fresh-Beer.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    -wekit-background-attachment: fixed;
    -o-background-attachment: fixed;
    -moz-background-attachment: fixed;
}
.text{
    text-align:center;
}
img{
    margin-top:10%
}
.info{
    margin-top: 5%;
}
div p{
    font-size:5vw;
    color:#996633;
}


@media only screen and (max-width: 500px){
    .text img{
        width:100%;
    }
    img{
    margin-top:50%
    }
    .info{
        margin-top: 10%;
    }   
}

这绝对解决了所有问题。

【讨论】：