为什么不是我的背景CSS图像显示

因此，我做了一个背景图像，只是两个彩条匹配我的标题和导航栏。我只是想让它水平重复，但没有显示出来。下面是一个显示我的文件和图像的屏幕截图： enter image description here 为什么不是我的背景CSS图像显示

感谢您的帮助！

HTML

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Tech MAX'd</title> 
    <link rel="stylesheet" href="css/main.css" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
    <script src="js/general.js" type="text/javascript"></script> 
</head> 


<body> 
    <div id="big_wrapper"> 
     <header id="top_header"> 
     <h1>Welcome to Tech MAX'd</h1> 
     </header> 

     <nav id="top_nav"> 
     <ul> 
      <li>...

CSS

*{ 
    margin:0px; 
    padding:0px; 
} 
h1{ 
    padding: 2px; 
    color: #ffffff; 
    font: 24px Palatino; 
    display: inline-block; 
} 
h2{ 
    font: bold 14px Palatino; 
} 
header, section, footer, aside, nav, article, hgroup{ 
    display:block; 
} 
body{ 
margin: 0px; 
padding: 0px; 
text-align: center; 
background: #e0e0e0 url(images/tmbackground.gif) repeat-x; 
} 
#big_wrapper{ 
    min-width:1000px; 
    max-width: 1000px; 
    margin: auto; 
    text-align:left; 
} 
#top_header{ 
    padding:20px; 
    background-color: #820000; 
} 
#top_nav{ 
    padding:7px 7px 7px 20px; /* top,right,bottom,left */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#b6b6b6)) 
} 
#top_nav li{ 
    display:inline-block; 
    list-style:none; 
    padding-right:25px; /*space between links*/ 
    font: bold 14px Tahoma; 
} 
a.topLinks{ 
    color: #4e4e4e; 
    font: bold 16px Century; 
    text-decoration: none 
} 
a.topLinks:hover{ 
    color: #820000; 
    font: bold 16px Century; 
    text-decoration: none 
} 
#new_div{ 
    display:inline; 
} 
#main_section{ 
    min-width: 630px; 
    max-width: 630px; 
    border: 1px solid #820000; 
    background-color: white; 
    float: left; 
    margin: 20px; 
    padding: 20px; 
} 
#side_news_banner{ 
    float: left; 
    margin-top: 20px; 
    margin-left: 15px; 
} 
.side_news{ 
    border: 1px solid red; 
    width:220px; 
    margin: 20px 0px; 
    padding: 30px; 
    background: #66CCCC; 
} 
#the_footer{ 
    clear: both; 
    text-align:center; 
    padding: 20px; 
    border-top: 2px solid green; 
} 
article { 
    background: #FFFBCC; 
    border: 1px solid ; 
    padding: 20px; 
    margin-bottom: 10px; 
} 
article footer{ 
    text-align:right; 
}

来源

2012-04-08 mharris7190

你能否提供一个'测试'页面的链接，以便我们可以看到你正在使用哪些图像？而不是url（images/background.gif）？或者试试www.jsfiddle.net =>把代码放在左上方，然后css放在右上方，然后按CTRL + ENTER – 2012-04-08 19:05:22

顺便说一句，你在哪里使用的软件？这对我来说似乎很有趣:) – Asif 2012-04-08 22:14:21

url(../images/background.gif)

，因为该位置是相对的CSS文件。

此外，通常在选择器和“{”之间留有空格，即body {而不是body{。

来源

2012-04-08 19:06:02

当我将图像文件夹放在css文件夹中时，它现在可以工作，但我如何参考它相对于css文件夹，因此我不必将我的图像文件夹放入css文件夹中？ – mharris7190 2012-04-08 19:43:06

没关系，我意识到你的字面意思是让我输入两个句号，例如：（../images/background.gif），因为这两个句号使我在文件夹层次结构中恢复了一个级别。非常感谢你！ – mharris7190 2012-04-08 19:49:55

~~赔率是~~ 您把它http://example.com/images/background.gif。你的样式表是说它在http://example.com/css/images/background.gif，所以你会得到一个404错误。

来源

2012-04-08 19:02:54 Quentin

非常感谢！这是我做的我猜，因为当我把我的图像文件夹在我的css文件夹，它现在的作品。但是，我如何从URL内引用css之外的文件夹（...），所以我不必将我的图像文件夹放在那里？ – mharris7190 2012-04-08 19:41:16

我不太明白为什么你需要身体的宽度属性。但问题可能在你的网址。我想它应该是“/images/background.gif”。如果你把“images/background.gif”，它会指定css/images/background.gif。

来源

2012-04-08 19:04:01

为什么不是我的背景CSS图像显示

回答

相关问题