0

所以，我已经看到了很多这些问题，但是我尝试了所有的解决方案，但发现它们都不起作用。这让我头疼，我再也受不了了。所以我的背景图片放置如下：

<body background="images/farmancover.jpg"/>

这很简单，实际上在我的网站上查看：http: //farmanp-ux.com

现在，我的问题是背景图像没有显示在我的任何网络浏览器中，很难弄清楚。如果各位大侠能帮上忙，将不胜感激！我是这方面的新手，所以请温柔。

4

3 回答 3

3 
<body style="background:url('images/farmancover.jpg');">

尽管您通常会将其添加到您的 CSS 文件中，而不是使用内联样式。

body {
  background:url('images/farmancover.jpg');
}

特别是对于您的网站，图像可能不会显示，因为您的图像文件实际上是 images/FarmanCover1.jpg（注意 URL 区分大小写）。

以下应该会给你想要的效果。

<body style="background:url('images/FarmanCover1.jpg') no-repeat;">

您还有许多 HTML 错误，但以下内容已经过测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>
    Farman Pirzada - UX Designer - Harvesting creativity one at a time - Ohio, US
  </title>

  <!-- STYLES -->
  <link rel="stylesheet" type="text/css" href="http://www.farmanp-ux.com/css/style.css" />

  <meta content=
    "Farman Pirzada, UX Designer, CSS, HTML5, Web 2.0, portfolio" />
</head>

<body style="background:url('http://www.farmanp-ux.com/images/farmancover.jpg') no-repeat fixed;">
  <img src="http://www.farmanp-ux.com/images/farmanUX.png" class="center" alt="" />
  <div id="navmenu">
    <ul>
      <li><a href="farman.html">home</a></li>
      <li><a href="about.html">about</a></li>
      <li><a href="design.html">designs</a></li>
      <li><a href="services.html">services</a></li>
      <li><a href="contact.html">contact</a></li>
    </ul>
  </div>
</body>
</html>
于 2013-01-07T05:45:57.100 回答
3

如今， CSS 属性body { background-image: url('images/farmancover.jpg'); };似乎比将其指定为 HTML 的一部分更受欢迎。

于 2013-01-07T05:47:01.513 回答
2

要实际使用大小合适的原始文件farmancover.jpg，6.7MB您需要将其转换为实际.jpg文件！即使这个文件名有扩展名.jpg，它也是一个带有错误扩展名的Adob​​e PSD项目文件。

话虽如此，拥有这样的文件大小是很奇怪的.jpg，这是一个问题的赠品。

在此处输入图像描述

首先，确保您有一个有效的.jpg图像文件。

正确的文件名是farmancover.jpg。

它在这个位置： http: //farmanp-ux.com/images/farmancover.jpg

您的文件名也区分大小写。

那么正确的图像路径是：

'images/farmancover.jpg'

要访问所有图像的文件夹内容，请使用以下 URL： http: //farmanp-ux.com/images/

然后在您的 CSS 样式表中：http: //www.farmanp-ux.com/css/style.css

改变这个：

body
{background-repeat:none}

对此：

body {
  background:url(http://www.farmanp-ux.com/images/farmancover.jpg) no-repeat center center;
  background-repeat:none
}

在您的 CSS 样式表中还可以看到，每个 CSS 选择器的最后一个属性没有分号。请确保每个属性都以一个结尾。

其次，在您的 HTML 网页中，删除背景图像的EXTRA body标记。

最终结果：

带有背景图像的 jsFiddle 演示

额外：使用在线教程全屏显示背景图像，即使对于较旧的非 CSS3 浏览器，如 IE8，此方法在下面的小提琴中使用。

带有可缩放背景图像的 jsFiddle 演示
（/show/从 jsFiddle 中删除以访问编辑页面）

于 2013-01-07T05:54:39.723 回答