Центрирование прозрачного фонового изображения поверх радиального градиента в заголовке

Question

Просто спроектированный новый логотип для веб-сайта, который я создаю и сделал прозрачным фоном Изображение PNG, я хочу получить радиальное изображение за ним и чтобы изображение оставалось центром где возникает радиус.

Он отлично выглядит на рабочем столе, пока вы не скроете экран, а затем появится серьезное переполнение. Я пробовал overflow-x: hidden в разделе HTML и Body, что устраняет серое пространство по сторонам, но изображение смещается от радиального градиента и выглядит липким. Эта проблема также существует в мобильных устройствах, демонстрируя переполнение, и если я захочу скрыть ее, то она очень не в центре.

Я пробовал несколько комбинаций различных значений background в CSS, -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>