Question

我正在尝试在背景图片中放置完整尺寸，高度工作正常，但宽度不起作用。

这里是index.html.er文件：

<!-- Intro Header -->
    <header class="intro">
        <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <h1 class="brand-heading">Mota Project Live</h1>
                        <p class="intro-text">Have a joy with Mota Project Live the most experimental music.<br>Let's Join us and Joy!</p>
                        <a href="#about" class="btn btn-circle page-scroll">
                            <i class="fa fa-angle-double-down animated"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

这里是application.html.erb文件：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "Mota Project Live" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Mota Project Live" %>">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
    <header>
      <%= render 'layouts/navigation' %>
    </header>
    <main role="main" class= "container">
      <div class="row">
        <div class="col-lg-12">
          <%= render 'layouts/messages' %>
          <%= yield %>
        </div>
      </div>
    </main>
    <%= render 'layouts/footer' %>
  </body>
</html>

我的.scss文件：

.intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url('intro-bg.jpg') no-repeat bottom center scroll;
    background-color: transparent;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;

}

.intro .intro-body {
    display: table-cell;
    vertical-align: middle;
}

.intro .intro-body .brand-heading {
    font-size: 40px;
    padding: 80px;
}

.intro .intro-body .intro-text {
    font-size: 18px;
}

Answer 1

background-attachment：fixed;表现得像位置：固定，所以图像从文件流中删除，因此背景大小：覆盖;没有效果。

顺便说一句，您几乎肯定不需要供应商前缀背景大小。 http://caniuse.com/#search=background-size

Answer 2

尝试在.into类

中添加以下行

  background: url('intro-bg.jpg') no-repeat bottom 100% scroll;

Answer 3

我解决了这个问题，问题的解决方案就在网格中。我所做的是更改application.html.erb文件和class="container"的main fluid。我换了：

<main role="main" class= "container-fluid">

并且完美无缺。而问题不在于css文件。谢谢大家的帮助。

如何全尺寸背景图片？

3 个答案: