透明な背景画像をヘッダ内の放射状の勾配の上にセンタリングする

Question

私は構築している透明な背景PNG画像を作成したばかりのウェブサイトに新しいロゴをデザインしました。半径がどこにあるか。

画面を最小化してから重大なオーバーフローが発生するまで、デスクトップで正常に表示されます。私はoverflow-x: hiddenをHTMLとBodyセクションで試しました。これは、側面のグレーのスペースをなくしていますが、イメージは放射状のグラデーションから外れてしまい、不粘着に見えます。この問題はモバイルにも存在し、オーバーフローを示しています。それを隠すことを選択した場合、それは非常に中心にありません。

私は、CSSにbackgroundという異なる値の複数の組み合わせを試しましたが、-image, -position, -size, -coverは利用できません。

現在、私が持っている：

<style> 
 
html,body { 
 
\t \t \t width: 100%; 
 
\t \t \t height: 100%; 
 
\t \t \t margin: 0px; 
 
\t \t \t padding: 0px; 
 
\t \t } 
 
    #banner { 
 
\t \t \t background-image: black; /* For browsers that do not support gradients */ 
 
\t \t \t background-image: -webkit-radial-gradient(red, gray, black); /* Safari 5.1 to 6.0 */ 
 
\t \t \t background-image: -o-radial-gradient(red, gray, black); /* For Opera 11.6 to 12.0 */ 
 
\t \t \t background-image: -moz-radial-gradient(red, gray, black); /* For Firefox 3.6 to 15 */ 
 
\t \t \t background-image: radial-gradient(red, gray, black); /* Standard syntax */ 
 
\t \t \t width: 100%; 
 
\t \t \t background-position: center; 
 
\t \t \t background-repeat: no-repeat; 
 
\t \t \t background-size: cover; 
 
    } 
 
</style> 
 

 
<header id="banner"> 
 
\t <img src="banner.png" style="position:center"/> 
 
</header>

は、互いの上にそれらをオーバーレイする方法はあります、私はbackground-color、background、または放射状のグラデーションとbackground-imageと同様に上場しようとしていますurl("banner.png")しかし、それはうまくいきません。実際には、CSSから含めると画像が表示されません。

グラデーションを背景として作成するのが最も簡単なことですが、サイズを変更するとロゴが歪んでしまうことはありません。私はSVGでそれをやろうとしたが、これはもっと簡単だろうと思った。

Answer 1

<style> 
 
html,body { 
 
\t \t \t width: 100%; 
 
\t \t \t height: 100%; 
 
\t \t \t margin: 0px; 
 
\t \t \t padding: 0px; 
 
\t \t } 
 
    #banner { 
 
\t \t \t background-image: black; /* For browsers that do not support gradients */ 
 
\t \t \t background-image: -webkit-radial-gradient(red, gray, black); /* Safari 5.1 to 6.0 */ 
 
\t \t \t background-image: -o-radial-gradient(red, gray, black); /* For Opera 11.6 to 12.0 */ 
 
\t \t \t background-image: -moz-radial-gradient(red, gray, black); /* For Firefox 3.6 to 15 */ 
 
\t \t \t background-image: radial-gradient(red, gray, black); /* Standard syntax */ 
 
\t \t \t width: 100%; 
 
\t \t \t background-position: center; 
 
\t \t \t background-repeat: no-repeat; 
 
\t \t \t background-size: cover; 
 
\t \t \t text-align: center; 
 
    } 
 
</style> 
 

 
<header id="banner"> 
 
\t <img src="banner.png"/> 
 
</header>