make a theme retina ready (for the header image)

Hi everyone!

I am in doubt if I should post this question here or elsewhere.. I don’t see where the old CSS forum is.

I am having a bit of trouble with my theme.

It’s an old theme and it is not retina ready.

Well, the images I post look fine on a retina display, with the exception of the header image, that looks a bit blurry.

I would like to change that.

The header image is supposed to be 945×150 px.

So, I have one image with double that size, 1890×300 px.

For what I researched, I need to change something on my functions.php file as well on the style.css.

I had some trouble before, when changing things in the functions.php, that’s why I decided to come here, to avoid me typing wrong things on the functions.php and having that FATAL ERROR issue.

My function.php file says this about the header image:

/**
 * Styles the header image displayed on the Appearance > Header admin panel.
 */
function blogum_admin_header_style() {
?>
	<style type="text/css">
		#headimg {
			width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
			height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
		}
		#heading {
			display: none;
		}
	</style>
<?php
}

The header.php file has this:

<?php
		// Do we have a header image around?
		if ( '' != get_header_image() ) :
	?>
	<div id="header-image">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /></a>
	</div>
	<?php endif; ?>

The style.css file has this (no info about the size):

#header-image {
	margin: -25px 0 15px 0;
}

Do you think that I could change this, on the funcions.php

width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;

replacing it by the image’s size?

Also replace this

width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>"

on the header.php, with the image’s size?

Or should I do something else?

What do I need to write on the style.css file?

What do you guys think?

Is it something doable?

The link to my website is https://exquisite.style

Thank you guys!