全屏响应式背景图像

Question

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

我想让<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%;
}

- Tom Rogers

---

等一下……你想要整个页面的……哦，原来是这样。body { background: url("../img/bb-background2.png") no-repeat fixed center center / cover transparent; color: #999999; font-family: 'Lato',sans-serif; } - Cam

从主标题中删除您的背景 - Cam

我使用了"完美响应式全屏背景"，效果非常好。 - Ken Prince

Answer 1

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

//HTML
<img src="images/bg.jpg" id="bg" alt="">

//CSS
#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

OR

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

或者

//HTML
<img src="images/bg.jpg" id="bg" alt="">

//CSS
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

//jQuery
$(window).load(function() {    

        var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height();

        function resizeBg() {

                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                    $bg
                        .removeClass()
                        .addClass('bgheight');
                } else {
                    $bg
                        .removeClass()
                        .addClass('bgwidth');
                }

        }

        theWindow.resize(resizeBg).trigger("resize");

});

- Plummer

---

提供的网站在浏览器版本为IE7和8时存在问题，其他浏览器均正常运行。您看过这个网站了吗？ - Cam

两种CSS方法（＃2比＃1更多）都适用于IE7 / 8，jquery方法适用于IE7 +。当你说“你看过网站吗？”时，我不知道你指的是什么，因为问题中没有列出任何网站。如果您引用我提供的文章，则需要仔细阅读其中支持每种方法的浏览器/版本内容。 - Plummer

我使用了Chris Coyier的这种方法。它很有效。只需尝试并将此答案标记为正确即可。 - tahdhaze09

嗨@tPlummer，感谢您的支持，如果这是一个重复的问题，我很抱歉。我对Stack Overflow和Foundation都很陌生。不过真的非常感谢您的帮助。 - Tom Rogers

同时 z-index 也起到了作用。在 CSS 文件中添加以下代码 => z-index:-100; 以便将图像置于所有元素的后面。 - dani24

Answer 2

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

- 9pixle

---

当我将这个东西用在一个全屏大小的 div 中时，在桌面上它可以正常工作。但是在手机和平板电脑上，它会被拉伸以适应整个页面的高度，而不仅仅是我给它分配的 div。有任何想法为什么会这样？ - Misbit

@vsdev，有解决办法吗？我在PWA全屏启动时遇到了类似的问题:( - Satys

@Satys 抱歉，我不记得了。已经太久了，但我认为自从那个网站运行了大约三年以来，我已经让它能够工作了。但是现在那段代码已经不再存档了。 - Misbit

@vsdev，谢谢您的回复，实际上，我已经成功解决了它！ - Satys

@Satys - 我也遇到了同样的问题 - 你还记得你是如何解决背景图像填充整个页面高度而不仅仅是分配给它的div的问题的吗？ - Clark

Answer 3

全屏响应式背景图片的实现:

设置 CSS 高度（height: 100vh）

例如：

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

- MXLink

---

+1 这个不会影响后续 div 的位置，因为它没有固定 .main-header 的位置。 - J0ANMM

Answer 4

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

html, body {
    height: 100%;
    background-size: cover;
    background:url("http://i.imgur.com/aZO5Kolb.jpg") no-repeat center center fixed;
}

http://jsfiddle.net/8XUjP/58/

- cn123h

Answer 5

我在我的预发布网站EnGrip上遇到了同样的问题。我在这个问题存在的情况下上线了网站。但是经过几次尝试，最终这个方法对我起作用：

background-size: cover;
background-repeat: no-repeat;
position: fixed;
background-attachment: scroll;
background-position: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
z-index: 0;

这是一个纯CSS解决方案，没有任何JS/JQuery修复。虽然我对UI开发还很陌生，但我想分享一个可行的解决方案，因为我昨天读到了这个帖子。

- Anil kumar

---

我使用下面的代码：background-repeat:no-repeat;background-size: cover;background-attachment: scroll;background-position: 50% 50%;padding-top:101px; 它能够正常工作。 - simon

Answer 6

我个人不建议在HTML标签上应用样式，因为这可能会在开发的后期某个地方产生副作用。

所以我建议将background-image属性应用于body标签。

body{
    width:100%;
    height: 100%;
    background-image: url("./images/bg.jpg");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

这个简单的技巧解决了我的问题。对于大多数屏幕（无论是更大还是更小），都适用。

有很多方法可以实现，我发现这是最简单的方法，并且副作用最少。

- Pavan S

Answer 7

Backstretch

看看这个一行代码插件，可以响应式地缩放背景图片。

你只需要：

1. 引入库文件：

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

2. 调用该方法：

$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

我用它来制作一个简单的“建设中网站”，效果非常好。

- Joshua Pinter

---

是不是因为增加了复杂度才被踩了？你觉得这个结果可以用纯CSS实现吗？ - Daithí

五年后我同意你的看法。它虽然依旧是一个选项，但并不是说它无法发挥作用。通常情况下，你只会对那些实际上没有回答原始问题的解决方案进行负评。 - Joshua Pinter

Answer 8

试试这个：

<img src="images/background.jpg" 

style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">

http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.html

- Tony Wu

Answer 9

这对我有用，所以发布了它。

.my-container {
  position: relative;
  background: #696969;
  overflow: hidden;
}
.my-container:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.6;
  background-image: url('https://images.pexels.com/photos/1084542/pexels-photo-1084542.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
  background-position: 50% 0;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
}

- Salman Riyaz

Answer 10

你也可以不使用JavaScript，而是使用基于纯CSS的响应式全屏横幅部分来创建全屏横幅部分。 在横幅主要div中使用height: 100vh;，这里有一个实时示例。

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

https://www.htmllion.com/fullscreen-header-banner-section.html

- Ashok