背景图像不覆盖背景图层


Background image not Covering Background Laravel

我一直在梳理网络,看起来应该是一个相当简单的过程。我正在寻找简单地从我的服务器分配图像作为背景,我正在通过CSS工作的页面。我对Laravel框架有点陌生,所以这里可能有点不同?

我目前有以下CSS定义我的页面主体(包括背景图像):

body {
  overflow:auto;
  width: 100%;
  height: 100%;
  background: transparent url('.../img/giant_back_hi.jpg') no-repeat center center;
  background-repeat: no-repeat;
  background-position: fixed;
  -webkit-background-size: cover;
  -webkit-filter: cover;
  background-size: cover;
  color: white;
  margin: 0;
  padding: 0;  
}

和下面的view元素来读取它:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="resources/css/layout.css" />
    <title>my-app</title>
  </head>
  <body>
    @include("header")
    <div class="content">
      <div class="container">
        @yield("content")
      </div>
    </div>
    @include("footer")
  </div>
</html>

每当我尝试渲染页面时,一切都很好,但背景返回空白。任何想法,我错过了什么或如何正确编码这?

目录映射如下:

public
--css
----layout.css
--img
----giant_back_hi.jpg

提前感谢您的帮助!

编辑我已经确定,当我应用一个定量的高度值的高度属性在css ie。(height:1200px;)图像显示

所以,图像显示它只是没有覆盖页面,因为我告诉它太…它隐藏在我的头部,直到我手动调整它的大小。

您正在为您的站点提供安装中的public/文件夹作为根目录,因此您的public/css/public/img/文件夹的内容可以通过/css//img/访问视图中的HTML和CSS。

在这种情况下,从HTML的角度来看,根目录(/)是你的public/目录,所以,在你的HTML中,更新链接到你的css:

<link rel="stylesheet" href="/css/layout.css" />

和在css中:

background: transparent url('/img/giant_back_hi.jpg') no-repeat center center;