所以,我已经看到了很多这些问题,但是我尝试了所有的解决方案,但发现它们都不起作用。这让我头疼,我再也受不了了。所以我的背景图片放置如下:
<body background="images/farmancover.jpg"/>
这很简单,实际上在我的网站上查看:http: //farmanp-ux.com
现在,我的问题是背景图像没有显示在我的任何网络浏览器中,很难弄清楚。如果各位大侠能帮上忙,将不胜感激!我是这方面的新手,所以请温柔。
所以,我已经看到了很多这些问题,但是我尝试了所有的解决方案,但发现它们都不起作用。这让我头疼,我再也受不了了。所以我的背景图片放置如下:
<body background="images/farmancover.jpg"/>
这很简单,实际上在我的网站上查看:http: //farmanp-ux.com
现在,我的问题是背景图像没有显示在我的任何网络浏览器中,很难弄清楚。如果各位大侠能帮上忙,将不胜感激!我是这方面的新手,所以请温柔。
<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>
如今, CSS 属性body { background-image: url('images/farmancover.jpg'); };
似乎比将其指定为 HTML 的一部分更受欢迎。
要实际使用大小合适的原始文件farmancover.jpg
,6.7MB
您需要将其转换为实际.jpg
文件!即使这个文件名有扩展名.jpg
,它也是一个带有错误扩展名的Adobe 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
标记。
最终结果:
额外:使用在线教程全屏显示背景图像,即使对于较旧的非 CSS3 浏览器,如 IE8,此方法在下面的小提琴中使用。
带有可缩放背景图像的 jsFiddle 演示
(/show/
从 jsFiddle 中删除以访问编辑页面)