Centering transparent background image on top of a radial gradient in the header

Question

Just designed a new logo for a website I am building and made a transparent background PNG image, I am wanting a radial image behind it and for the image to remain center where the radius originates.

It looks fine in desktop, until you minimize the screen and then there is serious overflow. I have tried overflow-x: hidden in the HTML and Body section, that eliminates the gray space on the sides, but the image shifts from off of the radial gradient and looks tacky. This problem also exists in mobile, showing overflow, and if I choose to hide it then it is very off center.

I have tried multiple combinations of different background values in CSS, -image, -position, -size, -cover to no avail.

Currently I have:

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

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

Is there a way to overlay them over each other, I have tried listing background-color, background, or background-image with the radial gradient as well as the url("banner.png") but that hasn't worked, in fact, the image won't appear if I try to include it from CSS.

Pretty stumped, the easiest thing I suppose would be to create the gradient as the background, but I don't want the logo getting distorted when resized. I gave up trying to do it in SVG, and figured this would be easier.

There is no such value as `position:center`...I'd start there, — Paulie_D, Oct 18 '16 at 18:04

score 0 · Answer 1 · answered Oct 18 '16 at 18:49

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

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

Centering transparent background image on top of a radial gradient in the header

1 Answers1