2011-07-28 12 views
0

私はウェブサイトを作っています(私はHTML & Photoshopについて何も知らないが)。 それは私にとって非常に難しい課題です。私はこれまでに得たものにとても満足しています。HTML div with a background

今、サイト上にボックス/浮遊する四角形を作りたいと思います。

だから私はdiv要素を使用してこれをやってみたかったが、私はどのように何の手がかりもない:

<div id="div1" style="background-image: url(../bg_content_middle.png);height: 129px"> 
HELLO IS THIS A BOX? 
</div> 

@私は私のstyle.cssでこれを持っていた:

#div1 {Background: url("bg_content_middle.png");} 

bg_c​​ontent_middle.pngです1ピクセルの高さの "バー"を私は上下に欲しい。 とさえ:(

を働いていないthatsの私を助けてください

答えて

-1

をあなたが位置を設定する必要があります。。あなたのCSSで絶対にそこからあなたは位置とサイズに左上、と高さを使用することができ、あなたのタグ

2

あなたは、外部CSSルールをインラインCSSを混合している。../bg_content_middle.pngとインラインスタイルはbg_content_middle.pngの他の背景画像のURLをオーバーライドしている。あなたは一度だけそれを定義する必要があります。

をあなたが行くことができる。この場合、純粋なCSSソリューション:

<div id="div1">HELLO I AM A BOX ^_^</div> 

#div1 { 
background-color: #900; 
border: #f33 1px solid; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
} 

divに番号を付けないでください。<div id="content">のような関連性のあるものを呼び出してください。

+0

私は例のためにdiv1を使用しました。(私はオランダの名前を使用することをお勧めします。)< それを両方に置くと現実には表示されません。 トップとボトムの画像を追加する方法はありますか? (ソフトコーナーなどの場合) – krtek

+1

spiffyboxを使用する - http://spiffybox.com/ –

0

1を助け

希望)、バックグラウンドでのB小文字
2を作るには)のstyle.cssと同じディレクトリにある画像ですか?そうでない場合は、正しいディレクトリにリンクする必要があります。うまく

0

、あなたのdivはbackroundのを持ちたいすべては、あなたがthisチュートリアルからこの例のような単純なものを持つことができる場合:すべての

<body> 
<div style="background: green"> 
<h5 >SEARCH LINKS</h5> 
<a target="_blank" href="http://www.google.com">Google</a> 
</div> 
</body> 
0

まず、あなたは一度だけ、この特定のスタイルを定義する必要がありますインラインスタイル(タグの<style>属性内のスタイル)が優先されます。この場合、インラインスタイルは削除する必要があります。冗長であり、場合によってはイメージパスを再確認する必要があるからです。 CSSのパスはドキュメントの相対パスでもよく、その場合はCSSファイルの場所を参照し、HTMLページには相対的ではありません。

1ピクセル高い場合は、repeatプロパティも設定するとよいでしょう。要素のCSSにこれを入れてください:

そして、画像の幅に相当する幅を設定してください。