htmlとcssのテキストの背後に画像を置くことができません

Question

こんにちは 私はhtmlとcssプロジェクトで作業しています。私は、この画像のように背景に画像を持っているテキストのボックスを作成したい： 私が得る結果がこれです：

.background { 
 
    background: url(background.png) repeat; 
 
    border: 2px solid black; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    opacity: 0.4; 
 
    -webkit-filter: sepia(100%); 
 
    /* Chrome, Safari, Opera */ 
 
    filter: sepia(100%); 
 
} 
 
div.transbox { 
 
    margin: 30px; 
 
    background-color: #ffffff; 
 
    border: 1px solid black; 
 
    opacity: 0.6; 
 
    filter: alpha(opacity=60); 
 
    /* For IE8 and earlier */ 
 
} 
 
div.transbox p { 
 
    margin: 5%; 
 
    font-weight: bold; 
 
    color: #000000; 
 
}

<div class="background"> 
 

 
    <div class="transbox"> 
 
    <p>This is some text that is placed in the transparent box.</p> 
 
    </div> 
 
</div>

、私は変更すべきものはあります私のコードで？私の画像background.pngは、私がhtmlファイルを持っているフォルダにあります。ありがとう！

Answer 1

であることを、確認することはできません可能性があり

あなたのCSSファイルでこれを使用すると：

background: url(background.png) repeat; 

これは、画像がcssファイルと同じフォルダにあることを意味します。

画像はまた、この「

background: url('../background.png') repeat; 

を使用して、CSSファイルの上位フォルダ内にある場合は、Linux OS上でしようとしている場合は、ファイルの名前の上位/下位ケースを気

完全なメッセージ置くため

おかげ@StephenP：CSSファイルで

パスがあなたのフィル場合、文書

Answer 2

主な問題は、この

background: url(background.png) repeat; 

システムは、この絵を見つけ、この

background-image: url("background.png") repeat; 

のようにそれを試してみて、この画像は、この場所に

Answer 3

に対するスタイルシートへの相対ではありません電子構造は次のようになります。

index.html 
css/style.css 
img/background.png 

あなたはこのような背景にリンクする必要がありますurl('../img/background.png') 「..」バック親フォルダへ

https://jsfiddle.net/cnLjf8e5/