Question

我在浏览器屏幕上填写图片时遇到了困难。我对问题有很好的认识，但我不知道如何解决问题。如果我执行以下操作，图像效果很好：

app / views / layouts / application.html.erb文件 - 无问题

   <body>
    <section id="home">
      <div class="home-content text-center">
        <div class="container">
          <h2>Headline for Website</h2>
          <div>
            <%= link_to "Button", "#", class: "btn btn-success" %>
          </div>
        </div>
      </div>
    </section>
  </body>

CSS文件 - 没有问题

html, body{
    height:100%;
}
body { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
#home {
  background-color: #444;
  background-position: center 0%;
  background-size: auto;
  background-repeat: repeat;
  background-attachment: fixed;
  background-image: url('showcase-1.jpg');
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  z-index: 1;
}
.home-content {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  z-index: 3;
}

问题是我需要我的应用程序更具动态性。我需要app / views / layouts / application.html.erb来合并其他页面的代码。 application.html.erb中的下面代码确实显示了其他页面的内容，但是图像并没有像我在app.html.erb文件中直接获得代码那样跨越浏览器窗口。下面是创建我的问题的两个文件的代码。

app / views / layouts / application.html.erb文件 - 图片不包含背景

<body>
 <div id="wrapper">
  <%= render 'layouts/header' %>
  <div id="main">
   <%= yield %>
  </div>
 </div>
</body>

问题是现在图像没有覆盖背景。我在不同的html文件中使用与上面相同的代码。正在显示homepage.html.erb文件，但图像并未跨越整个屏幕。

app / views / pages / homepage.html.erb文件 - 图片未涵盖背景

<section id="home">
  <div class="home-content text-center">
    <div class="container">
      <h2>Header for Website</h2>
      <div>
        <%= link_to "Button", "#", class: "btn btn-success" %>
      </div>
    </div>
  </div>
</section>

我该怎么办？我需要更改CSS文件吗？我是否需要更改其中一个HTML文件？提前感谢您的帮助！

制作整页背景图片的挑战

0 个答案: