divに背景画像を表示できませんか？

件名の輪郭線があるので、背景のdivは表示されません。幅と高さを定義する必要があると思っていましたが、これはうまく動かず、名前とファイルパスを確認しました。divに背景画像を表示できませんか？

<head> 
<link rel="stylesheet" type="text/css" href="css/invoicestyle.css"/> 
</head> 
<body> 
<div id="wrapper"> 
<div id="header"> 
    <div id="logo"><img src="images/ATT3006209.jpg" /></div> 
    <div id="card"><img src="images/ATT3006207.jpg" /><br /><img src="images/ATT3006208.jpg" /></div> 
    <div class="clear"></div> 
    <div id="tagline"><p>Tagline goes here</p></div> 
    </div> 

    <div id="bar"> 
     <div id="left"></div> 
     <div id="middle"></div> 
     <div id="right"></div> 
     <div class="clear"></div> 
    </div> 

</div> 
</body>

body{ 
background:#FFF; 
font-family:Arial; 
font-size:12px; 
} 

.clear{ 
clear:both; 
} 
#wrapper{ 
width:1000px; 
margin:auto; 
} 
#logo{ 
float:left; 
} 
#card{ 
float:right; 
} 
#card img{ 
padding-bottom:5px; 
} 

#bar{overflow: hidden;} 
#left{ 
background: url("images/left.jpg") no-repeat; 
width:10px; 
height:50px; 
float:left; 
display: block 
} 
#middle{ 
background: url("images/mid.jpg") repeat-x; 
width:980px; 
height:50px; 
float:left; 
display: block 
} 
#right{ 
background: url("images/right.jpg") no-repeat; 
width:10px; 
height:50px; 
float:right; 
display: block 
}

出典

2012-03-25 jerrythebum

あなたは '画像を/'意味わからない '../画像/'？ – elclanrs

外部のCSSファイルを使用していますか？あなたのフォルダ構造を投稿できますか？ –

違いはありません – jerrythebum

は、私は.clearのためのあなたのCSSは、あなたがそれを貼り付けていなかったので、それはそれではない場合があります正しいかどうかを確認していない

#bar{overflow: hidden;}

を追加してみてください。問題がまだ残っているかどうか教えてください。

出典

2012-03-25 20:06:16 mkk

.clear { \t clear：both; } – jerrythebum

は、このトリックを行う必要があるようです。私はオーバーフローを試みました：とにかく隠されていましたが、私はもう助けになるかどうか分かりません。私は火かき棒でデバッグできるリンクがありますか？デバッグプロセスとして、画像を背景に変更してみてください：ピンク;背景：青;それがうまくいくならば、画像に何らかの問題があります。そのような場合は、画像のサイズがdivで宣言された幅と高さより大きくないことを確認します。 – mkk

あなたはbackground-image 1内部background-repeatプロパティを設定することはできません。 backgroundを単独で作成するか、repeatの内容をそのままbackground-repeatプロパティに移動してください。

出典

2012-03-25 20:01:14

が最初に古いバージョンで、background：url（）を使用してjsutに変更されました。編集された編集を参照してください – jerrythebum

イメージURLの周りに引用符を追加してください（必須ではありませんが、ブラウザを混乱させる可能性があります）。 –

引用符は変更されません。 – jerrythebum

#bar 
{ 
    width:100%; 
    height:100%; 
}

私は自分のプロジェクトでコードを使用しています。私は私のプロジェクトでこのコードを追加します。

出典

2012-03-25 20:06:39

これは役に立ちますか？

http://jsfiddle.net/9ygJG/

#bar { 
background: orange; 
width: 100%; 
height: 10em; 
} 

#left{ 
width:10px; 
height:50px; 
float:left; 
background-color: black; 
background-image: url(images/left.jpg) no-repeat; 
} 
#middle{ 
width:980px; 
height:50px; 
float:left; 
background-color: blue; 
background-image: url(images/mid.jpg) repeat-x; 

} 
#right{ 
width:10px; 
height:50px; 
float:right; 
background-color: black; 
background-image: url(images/right.jpg) no-repeat; 
}

出典

2012-03-25 20:07:03

これは、すべての領域が色付きの画像であることを示しています。/ – jerrythebum

自分のプロジェクトで相対URLを使用しているため、明らかに背景色を追加しました。 –

divに背景画像を表示できませんか？

答えて

関連する問題