2012-04-08 28 views
2

私は背景画像を作成しました。これは、ヘッダーとナビゲーションバーに一致する2つの色のバーです。私はちょうどそれが水平に繰り返すが、それが表示されないようにしたい。私のファイルと画像を表示するスクリーンショットを表示します: 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; 
} 
+2

「テスト」ページへのリンクを提供して、使用している画像を確認できますか? url(images/background.gif)ではなく? またはwww.jsfiddle.net =>左上のボックスにコードを入れ、右上にcssを入力してから、Ctrl + Enterを押してください –

+0

ここでどのソフトウェアを使用していますか?私にとっては面白そうです:) – Asif

答えて

5

は、CSSのサブディレクトリである、あなたは場所がCSSファイルへの相対であるため、

url(../images/background.gif) 

を使用する必要があります。

また、セレクタと「{」の間には、通常、body{ではなくbody {の間にスペースを入れます。

+0

私は画像フォルダをcssフォルダに置くと動作しますが、画像フォルダをcssフォルダに入れる必要はありません。 – mharris7190

+0

Nevermind、私はあなたが文字通り2つのピリオド(例:/images/background.gif)を入力することを意味していたことに気付きました。どうもありがとうございました! – mharris7190

4

オッズあなたは http://example.com/images/background.gifでそれを維持している ことです。あなたのスタイルシートはhttp://example.com/css/images/background.gifであると言っているので、404エラーが発生しています。

+0

ありがとうございました!これは私が私のCSSフォルダの中に私のイメージフォルダを置くので、私は推測しているものです、それは今動作します。しかし、どうすれば私の画像フォルダをそこに置く必要はないので、URLの中からCSSの外にあるフォルダを参照するのですか(...)? – mharris7190

0

bodyにwidth属性が必要なのはなぜか分かりません。しかし、問題はあなたのURLにある可能性があります。私はそれが "/images/background.gif"でなければならないと思います。 "images/background.gif"を入力すると、css/images/background.gifが指定されます。ディレクトリの画像がない限り

関連する問題