Genesis uses the WordPress feature to put a logo in the header instead of the title and description. However, with the logo, the image size is set to the actual pixels.
To support double pixel density on Retina (iPhone) the logo image must have double the pixel size. The CSS property background-size is then used to set the normal width and height of the logo.
To implement this in the Genesis framework, proceed as follows:
- Overwrite standard functionality with
add_theme_support( 'custom-header', array(
'header_image' => '',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 150,
'width' => 500,
) );This can be extended either via the functions.php (only with your own theme which you develop yourself!) or e.g. via the plugin My Custom Functions.
2. height and width from the example above must be replaced with twice the size of the actual logo. So in this example the logo has the dimensions 250×75.
3. add in your own CSS:
/* replace width and height with actual size, it means half the size you used above in theme support for custom-header */
.header-image .site-title > a {
background-size: <width>px <height>px;
}Thanks to Anything graphic(https://anythinggraphic.net/override-header-image-logo-genesis-wordpress-retina-2x-version/)