2012-04-24 15 views
1

HTML5タグに正しく表示されるように、テクスチャ背景画像を取得するのが最も困難です。具体的には、私は低不透明の水彩ダブの.pngテクスチャを既にクロスブラウザー勾配が適用されているタグに追加しようとしています。グラデーションを上手く表示することはできますが、背景イメージが正しく表示されるようにすることはできません。divの背景画像

私はそれのためのCSSコマンドが人手不足していることを言われてきた。それは私が使用している引用符の種類の問題

background:url("filepath"); 

ですか?一重引用符か二重引用符の場合は重要ですか?または全く引用符がない?引用符がセレクタに何をしているのかわからないのですか、それとも背景画像とグラデーションを適用できないのかどうかは分かりません。私はhttp://www.zeldezine.info/demo/で修正しようとしているスペースを、見た目のフッタ位置で見ることができます。

ありがとうございます!

+0

パス。 –

答えて

3

あなたは同じ要素に背景画像とグラデーションを追加することはできません。引用符に関しては、それらがシングル、ダブル、または全くであるかどうかは関係ありません。画像のパスが正しいことを確認してください。あなたは両方をしたい場合

は、あなたがこのような何かを行うことができます。

http://jsfiddle.net/vjEh7/

CSS:

footer { 
    background: rgb(169,3,41); 
    background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); 
    background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 
    background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 
    background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 
    background: linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019',GradientType=0); 
} 
div { 
    width: 150px; 
    height: 160px; 
    background: url(http://www.zeldezine.info/demo/img/logo_bottom.png) no-repeat; 
} 

HTML:あなたの周り `" `持っている理由

<footer> 
    <div></div> 
</footer> 
+0

素晴らしい!ヒントありがとう! –

0

これを試してみてください:

body 
{ 
    background-image:url('images/image.jpg'); 
    background-repeat:repeat; 
}