[OneColumn] Header Image relative to screen size

Hi,

I am having a bit of trouble and cannot figure out how to do it right. I have put a banner on top of my header image. But this banner is placed on a “different position” if you use a screen with different size.
This is what I have got:

<?php if ( get_header_image() ) {?>
	<div >
  		<a href="LINK_TO_HOME">
  			<img src="<?php echo get_header_image() ; ?>"/>
  		</a>
<div style="height:25%; width:22%; position: absolute; top: 49%; left: 54%;">
<a href="LINK">
  			<img src="BANNER" />
  		</a> </div>
	</div>
	<?php } ?>

Please help me. 🙂 Could anyone tell me how to archive this, that the abnner is always on the same spot relative to the screen size.
If you need any additional information please let me know.

I am lookign forward to hear from you.

King regards,

Greeneco 🙂

Have a nice day.