Question

body {
  padding-top: 40px;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  background: url('3.jpg') repeat-y top;
  background-repeat: repeat;
  background-size: cover;  
}

由于某种原因它不起作用。图像存储在我的php文件存储的相同位置。这就是我没有放置images / 3.jpg的原因。我甚至尝试了图像/它没有用。

我正在使用Bootstrap;除了背景之外，所有的css正文代码都在工作。

Answer 1

试试这个：

css3方式

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

CSS

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% */
  }
}

以及更多方式： csstricks

Answer 2

你的CSS是对的。您可能有网址路径问题。图像的方向是从CSS文件到图像。您编写的代码仅在图像与CSS文件位于同一文件夹中时才有效。

HTH

Answer 3

我不确定你是如何做你的css但图像路径需要相对于包含css的文件。要检查这一点，您可以使用路径创建一个简单的img标记，并查看是否显示图像。

<img src="img.jpg"> or <img src="path/to/file/img.jpg">

你的CSS应该有效。如果您有外部样式表（.css文件），则需要将其导入到要使用它的页面的head标签中。

<link rel="stylesheet" type="text/css" href="path/to/file/style.css">

不要忘记图像路径是相对于调用它的文件，即使您导入css文件，图像仍应相对于样式表。

Answer 4

为firefox使用firebug之类的工具，或在Chrome中使用内置的devloper工具。从中您可以检查元素并查看已应用的内容。这将帮助您查看代码中是否有拼写错误。它还将提供无法找到的资源。 Firebug中的net选项卡在这方面特别有用。

我会使用root relative paths作为您的图片网址，这会生成资源调查所在地的资源管道的路径。

如何将图片作为我在css中的背景

4 个答案: