背景图像不覆盖背景 Laravel答案

【问题标题】：Background image not Covering Background Laravel背景图像不覆盖背景 Laravel
【发布时间】：2014-10-03 13:44:35
【问题描述】：

我一直在梳理网络，似乎它应该是一个非常简单的过程。我希望通过 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;  
}

以及下面的视图元素来读取它：

<!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 中的 height 属性时，即。 (height:1200px;) 图像显示。

所以，图像显示它只是没有像我告诉它的那样覆盖页面......它被我的标题隐藏，直到我手动调整它的大小。

【问题讨论】：

我猜是因为这个错字：url('.../img/giant_back_hi.jpg')。请注意 URL 开头的 3 点而不是 2 点。
@kajetons 抱歉，我有 3 分。我应该有 2 分吗？尝试了同样的问题。
您可以使用您喜欢的浏览器（Firefox 或 Chrome 都可以），按 F12 打开开发者工具，将鼠标悬停在元素主体上，然后查看 background-img 的真实 url，看看是否指向您想要的确切网址。就这样，你可以找到问题，然后找到解决方案。
乍一看，它似乎从它应该在的地方拉了出来。 @Tuanitim。即使我在 chrome 的新选项卡中单击打开路径，它也会打开正确的图像.. 它的调用正确，只是没有显示。
看到你的项目结构，试试这个： background: transparent url('img/giant_back_hi.jpg')...

标签： php html css laravel laravel-4

【解决方案1】：

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

在这种情况下，从 HTML 的角度来看，根目录 (/) 是您的 public/ 目录，因此，在您的 HTML 中，更新指向您的 css 的链接：

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

在你的 CSS 中：

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

【讨论】：