全屏响应背景图像

Question

我对前端开发和基础非常陌生。

我正在尝试使<div class="main-header">成为响应时按比例缩小的全屏图像。

有人可以告诉我我在做什么错吗？它可以正确缩放，但无法显示完整图像。我还希望<div class="large-6 large-offset-6 columns">在移动设备上位于其上方–可以吗？

HTML：

<!-- MAIN HEADER -->
<div class="main-header">
   <div class="row">
     <div class="large-6 large-offset-6 columns">
       <h1 class="logo">BleepBleeps</h1>
       <h3>A family of little friends<br>that make parenting easier</h3>
     </div> <!-- END large-6 large-offset-6 columns -->
   </div><!-- END ROW -->
</div><!-- END MAIN-HEADER -->

CSS：

.main-header {
    background-image: url(../img/bb-background2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

h1.logo {
    text-indent: -9999px;
    height:115px;
    margin-top: 10%;
}

Answer 1

http://css-tricks.com/perfect-full-page-background-image/

Answer 2

简单的全屏和居中图像https://jsfiddle.net/maestro888/3a9Lrmho

Answer 3

您还可以不使用JavaScript制作全屏横幅广告节，而是使用基于纯CSS的响应式全屏横幅广告节，高度为100vh；在横幅主div中，这里有此示例。

#bannersection {
    position: relative;
    display: table;
    width: 100%;
    background: rgba(99,214,250,1);
    height: 100vh;
}

Answer 4

For the full-screen responsive background image cover

<div class="full-screen">

</div>

CSS

.full-screen{
    background-image: url("img_girl.jpg");
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 5

通过在下面使用此代码：

Answer 6

我会说，在您的布局文件中提供一个

Answer 7

我发现了背景图像总是白底的原因。如果我将图像放在“ body”内部的“ div”元素中。但是，如果我将其作为“ body”的背景图片，则该图片可以全屏显示。

Answer 8

<style type="text/css">
html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>

Answer 9

关于“ background-size：cover”解决方案的一个提示，您必须将其放在“ background”定义之后，否则它将不起作用，例如，这将不起作用：

Answer 10

我在发布前的网站EnGrip中也遇到了同样的问题。我开始处理这个问题。但是经过几次试验终于对我有用：

Answer 11

用于全屏响应式背景图像

Answer 12

我个人不建议在HTML标签上应用样式，它可能在开发的后期部分产生后效应。

Answer 13

Backstretch

Answer 14

尝试一下：

Answer 15

我已经完成了这个javascript函数：它将背景图片固定为屏幕尺寸，以最有意义的尺寸（宽度od高度）为基准，而无需更改图像的纵横比。